/chimera-ui

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

Primary LanguageTypeScript

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.