@creation-ui/react

Creation UI

is a design system that lets you build a React powered websites and apps. It's built on top of React and Tailwind CSS and it's fully customizable. It's a great starting point for your next project.

Prerequisites

Creation UI is working with your app's Tailwind CSS and you need to have Tailwind CSS installed in your project - Tailwind CSS Installation.

  "peerDependencies": {
    "react": "^16 || ^17 || ^18",
    "react-dom": "^16 || ^17 || ^18",
    "tailwindcss": "^3.0"
  },

Installation

To install Creation UI, run command below:

```bash copy
 yarn add @creation-ui/react
 ```

```bash copy
 npm i @creation-ui/react
 ```

```bash copy
 pnpm i @creation-ui/react
 ```

Components

• [x] Autocomplete
• [x] Avatar
• [x] Button
• [x] Checkbox
• [x] Drawer
• [x] Input
• [x] Box
• [x] Button Group
• [x] Dark Mode Toggle inspired by This guy
• [x] Loader
• [x] Loading Overlay
• [x] Modal
• [x] Radio
• [x] Radio Group
• [x] Select
• [x] Status Badge
• [x] Switch
• [x] TextArea
• [x] Theme
• [x] Toggle Group
• [x] Tooltip

Reusable helpers

• [x] Dropdown Chevron
• [x] Clear Button
• [x] Error Text
• [x] Select Option

In development

• [x] Table
• [ ] Menu
• [ ] Layout
• [ ] Context Menu
• [ ] Accordion
• [ ] Schedule
• [ ] Timeline
• [ ] Breadcrumbs

Configuration

1. Add withTailwindConfig to your tailwind.config.js file:

const withTailwindConfig = require('@creation-ui/react/utils/withTailwindConfig')

module.exports = withTailwindConfig({
  content: ['!node_modules/**/*', './**/*.{js,ts,jsx,tsx,mdx}', '*.css'],
})

You can extend all properties as usual.

2. Import library's CSS file into your app. If you're using standard config of Next.js, you should import it in pages/_app.js or similar. If you're using standard config of create-react-app or Vite, you should import it in index.js or similar.

import '@creation-ui/react/index.css'

3. Start using it!

import { Button } from '@creation-ui/react'

export default function App() {
  return <Button>Click me</Button>
}