https://github.com/williamlmao/chimera-ui

A beautiful, accessible, and fully customizable Tailwind UI library for React. Maybe the easiest themeing experience ever? Free and open source.
https://github.com/williamlmao/chimera-ui

react tailwind ui

Last synced: 2 months ago
JSON representation

A beautiful, accessible, and fully customizable Tailwind UI library for React. Maybe the easiest themeing experience ever? Free and open source.

• Host: GitHub
• URL: https://github.com/williamlmao/chimera-ui
• Owner: williamlmao
• Created: 2023-01-06T00:04:19.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-19T00:33:07.000Z (about 2 years ago)
• Last Synced: 2025-04-10T10:06:00.597Z (3 months ago)
• Topics: react, tailwind, ui
• Language: TypeScript
• Homepage: https://www.chimera-ui.com/
• Size: 10.4 MB
• Stars: 130
• Watchers: 5
• Forks: 9
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        




     

          

            

          

        

        
Chimera UI



Beautiful, accessible, and fully customizable with Tailwind.


## Features

- Fully accessible components, with Radix Primitives under the hood.

- Includes additional components beyond Radix, such as Button and Input.

- Components come pre-styled. Styles can be easily overwritten with Tailwind (Chimera uses tw-merge under the hood).

- Semantic color system built in. No more guessing what color to use, just use the same semantic color names across all your projects.

- Theme generator that quickly generates CSS themes for you.

- Tailwind plugin to keep tailwind.config.js nice and clean.

- Tree-shakeable. Use named imports without worrying about bundle-size!

## Installation

See official docs for more information

1. `npm install @chimera-ui/components @chimera-ui/tw-plugin`

2. Modify your `tailwind.config.js` to include:

   - `"./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}",` in the `content` array

   - `require("@chimera-ui/tw-plugin")` in the `plugins` array

   - ```js

     module.exports = {

       content: [

         "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",

         "./components/**/*.{js,ts,jsx,tsx}",

         "./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}", // This line is important! If you don't include this, Chimera's styles will be purged

         ,

       ],

       plugins: [

         require("@chimera-ui/tw-plugin"), // This is important! This extends your tailwind theme to consume the CSS variables.

       ],

     };

     ```

3. Use the theme generator to generate CSS themes. Add the CSS variables to your global css file.

## Repository

`npm run build` will trigger `prebuild`. In `prebuild`, @chimera-ui/components will run tsdocSync.js, which syncs the classNames from each component to a tsdoc comment above it.