chimera-ui
chimera-ui copied to clipboard
A beautiful, accessible, and fully customizable Tailwind UI library for React. Maybe the easiest themeing experience ever? Free and open source.
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
-
npm install @chimera-ui/components @chimera-ui/tw-plugin
-
Modify your
tailwind.config.js
to include:-
"./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}",
in thecontent
array -
require("@chimera-ui/tw-plugin")
in theplugins
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. ], };
-
-
Use the <Link href="/docs/theme" className="text-primary underline">theme generator</Link> 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.