Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dorianmaliszewski/coco-ui
React UI Library based on tailwind
https://github.com/dorianmaliszewski/coco-ui
react storybook tailwindcss ui-components
Last synced: 2 months ago
JSON representation
React UI Library based on tailwind
- Host: GitHub
- URL: https://github.com/dorianmaliszewski/coco-ui
- Owner: DorianMaliszewski
- License: mit
- Created: 2021-04-25T16:25:19.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-02-23T17:49:31.000Z (almost 2 years ago)
- Last Synced: 2024-11-01T00:46:57.147Z (3 months ago)
- Topics: react, storybook, tailwindcss, ui-components
- Language: TypeScript
- Homepage: https://dorianmaliszewski.github.io/coco-ui/
- Size: 2.73 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# COCO UI
Click [here to access the storybook](https://dorianmaliszewski.github.io/coco-ui/)
This librairy is a set of React component to help you build beautiful and accesibile apps
## Getting started
This library is based on tailwind css so to use it you need to install this library and Tailwind with the following steps.
### Install Coco UI
```
npm install --save @coco-ui/core
```
Or alternatively with yarn :
```
yarn add @coco-ui/core
```
### Install tailwind
Before using this library you need to add tailwind to your React project. [Follow this link to install it](https://tailwindcss.com/docs/installation)
#### Using Create React App
`npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 @craco/craco`
Or with yarn
`yarn -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 @craco/craco`
Then replace in your `package.json` :
```
{
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},
}
```
### Theme configuration
You can import the default presets in your `tailwind.config.js` file :
```
// tailwind.config.js
module.exports = {
presets: [
require('@coco-ui/core/tailwind-theme')
],
}
```
Colors that are used :
- primary : In presets : `colors.purple`
- success : In presets : `colors.green`
- error : In presets : `colors.red`
- warning : In presets : `colors.yellow`
- info : In presets : `colors.blue`
- foreground : In presets : `colors.gray[900]`
- background : In presets : `white`
- gray : In presets : `colors.gray`
- white : In presets : `white`
- black : In presets : `black`