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 (opens in a new tab) 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 (opens in a new tab). Also @creation-ui/react package is required for the React packages to work. It contains sharable theme config, styles and utilities.

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

Installation

To install Creation UI, run command below:

yarn add @creation-ui/react

Configuration

Add withTailwindConfig to your tailwind.config.js file:

const { withTailwindConfig } = require('@creation-ui/react')
 
/** @type {import('tailwindcss').Config} */
const config = withTailwindConfig({
  content: [
    //
    './packages/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './**/*.css',
  ],
  plugins: [require('@tailwindcss/typography')],
})
 
module.exports = config

You can extend all properties as usual (opens in a new tab).

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'

Start using it!

import { Button } from '@creation-ui/react'
 
export default function App() {
  return <Button>Click me</Button>
}

Components