https://github.com/rmdort/react-kitt

Lightweight React functional components
https://github.com/rmdort/react-kitt

javascript react reactjs ui

Last synced: 4 months ago
JSON representation

Lightweight React functional components

• Host: GitHub
• URL: https://github.com/rmdort/react-kitt
• Owner: rmdort
• License: mit
• Created: 2017-11-28T02:38:09.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T18:27:51.000Z (about 2 years ago)
• Last Synced: 2024-10-13T18:49:08.687Z (4 months ago)
• Topics: javascript, react, reactjs, ui
• Language: JavaScript
• Homepage: https://rmdort.github.io/react-kitt/
• Size: 3.14 MB
• Stars: 9
• Watchers: 2
• Forks: 0
• Open Issues: 53
• Metadata Files:
  • Readme: Readme.md
  • License: License.md

Awesome Lists containing this project

README

        
# React kitt

Super lightweight React User Inteface components to help you get started. All components are very easy to customize using `sass`. You can also extends `react-kitt` to create own components for your brand.

Completely compatible with [Tailwind CSS](https://tailwindcss.com/) and Post CSS

* Github - https://github.com/rmdort/react-kitt

* Documentation - https://rmdort.github.io/react-kitt/

[![npm package](https://img.shields.io/npm/v/react-kitt.svg)](https://www.npmjs.org/package/react-kitt)

[![npm download](https://img.shields.io/npm/dm/react-kitt.svg)](https://www.npmjs.org/package/react-kitt)

[![Travis](https://img.shields.io/travis/rust-lang/rust.svg)](https://travis-ci.org/rmdort/react-kitt)

[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1452/badge)](https://bestpractices.coreinfrastructure.org/projects/1452)

![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)

[![PeerDependencies](https://img.shields.io/david/peer/rmdort/react-kitt.svg)](https://david-dm.org/rmdort/react-kitt#info=peerDependencies&view=list)

[![Dependencies](https://img.shields.io/david/rmdort/react-kitt.svg)](https://david-dm.org/rmdort/react-kitt)

[![DevDependencies](https://img.shields.io/david/dev/rmdort/react-kitt.svg)](https://david-dm.org/rmdort/react-kitt#info=devDependencies&view=list)

### What is included

1. React stateless functional components

2. Customisable color theme

3. SASS files for all components

4. Material icons support

5. MIT License

### List of components

1. [Alert](https://rmdort.github.io/react-kitt/#alert)

2. [Button](https://rmdort.github.io/react-kitt/#button)

3. [Button Group](https://rmdort.github.io/react-kitt/#buttongroup)

4. [Cards](https://rmdort.github.io/react-kitt/#card)

5. [Dropdown and popovers](https://rmdort.github.io/react-kitt/#dropdown)

6. [Flex based grid](https://rmdort.github.io/react-kitt/#row)

7. [Icon (material icons)](https://rmdort.github.io/react-kitt/#icon)

8. [Icon buttons](https://rmdort.github.io/react-kitt/#iconbutton)

9. [Menu](https://rmdort.github.io/react-kitt/#menu)

10. [Modal dialogs](https://rmdort.github.io/react-kitt/#modal)

11. [Pagination](https://rmdort.github.io/react-kitt/#pagination)

12. [Pills](https://rmdort.github.io/react-kitt/#pill)

13. [Progress bars](https://rmdort.github.io/react-kitt/#progress)

14. [Tabs, accordion and toggles](https://rmdort.github.io/react-kitt/#tab)

15. [Toggle](https://rmdort.github.io/react-kitt/#toggle)

16. [Tooltip](https://rmdort.github.io/react-kitt/#tooltip)

## How to use

Install react-kitt from npm

```md

yarn add react-kitt

or

npm install react-kit --save

```

### Include react-kitt styles

```md

import 'react-kitt/lib/styles/main.scss'

```

### Enable TailWind CSS

You can enable [Tailwind CSS](https://tailwindcss.com/) in `styles/main.scss` by uncommenting 

```md

@tailwind preflight;

@tailwind utilities;

```

### Import components from react-kitt

```md

import { Button, Dropdown, Menu, MenuItem, MenuDivider, withToggle } from 'react-kitt'

```

### Webpack configuration

To compile sass or css, you need to have `css-loader`, `style-loader`, `sass-loader` and `node-sass` installed.

````md

yarn add css-loader style-loader sass-loader node-sass --dev

````

Add this to your webpack config file

````md

{

  test: /(\.scss|\.css)$/,

  loaders: ['style-loader', 'css-loader', 'sass-loader']

}

````

### Example project

We have include a demo webpack project in `example` folder

#### React guidelines

https://github.com/airbnb/javascript/blob/master/react/README.md