@creation-ui/react v14.1.3

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

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

Reusable helpers

• Dropdown Chevron
• Clear Button
• Error Text
• Select Option

In development

• 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>
}