Skip to Content
Creation UI 15.0 is released 🎉
DocsSetup

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 . 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 || ^19",
    "react-dom": "^16 || ^17 || ^18 || ^19",
    "tailwindcss": "^4.0"
  },

Installation

To install Creation UI, run command below:

Configuration

  1. In your main .css file where you import tailwindcss v4, also import the creation ui css file. Don’t forget to add @source to the path of the Creation UI package to let tailwindcss know where to also look for it’s classes there.
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
@import "tailwindcss";
@import '@creation-ui/react/index.css';
@import '@creation-ui/react/theme.css';
 
@source "../node_modules/@creation-ui/react/dist";
 
/* you can extend the config as usual */
@theme {
  --font-sans: 'Manrope', 'sans-serif';
  --font-mono: 'Fira Code', 'monospace';
}
 
/* use dark theme detection */
@variant dark (&:where(.dark, .dark *));
 
/* rest of your css */
/* ... */

You can extend all properties as usual .

  1. Start using it!
import { Button } from '@creation-ui/react'
 
export default function App() {
  return <Button variant='contained'>Click me</Button>
}
  1. Rendered button
Last updated on
IndexAutocomplete