Skip to content

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

Notifications You must be signed in to change notification settings

williamlmao/chimera-ui

Repository files navigation

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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published