Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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/[](https://www.npmjs.org/package/react-kitt)
[](https://www.npmjs.org/package/react-kitt)
[](https://travis-ci.org/rmdort/react-kitt)
[](https://bestpractices.coreinfrastructure.org/projects/1452)

[](https://david-dm.org/rmdort/react-kitt#info=peerDependencies&view=list)
[](https://david-dm.org/rmdort/react-kitt)
[](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-kittor
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