You're looking at an early version of Chimera. All feedback is welcome, please submit through Github Issues!
Documentation
Introduction

Introduction

Chimera is a UI library designed for React and Tailwind. It aims to address the following problems:

  • Component libraries like MUI, Chakra, and Bootstrap look great out of the box, but can hard to customize
  • Themeing can be tedious with Vanilla Tailwind and libraries like Flowbite. I dislike needing to define the light mode color and dark mode color for every component
  • Vanilla Tailwind is not very reusable across projects with different styles
  • CSS only libraries such as Daisy UI can have accessibility issues
  • Headless libraries like Radix and Headless UI are.. headless. The whole point is that they come unstyled, but that means you spend a lot of time styling them.

That being said, there's a lot I love about each of those libraries too. The speed and customizability of Tailwind, the themeability of Daisy UI, the accessibility of Radix, and the works straight out of the box experience of MUI. Chimera an attempt to combine all of the parts I love about these libraries while minimizing the problems.

🎉

Huge shout out to Shadcn for creating shadcn/ui. I used many of the components from shadcn/ui as a starting point. If you are looking for a similar library without a color system, I recommend checking it out!

Key Features

Themeable & Reusable

Chimera extends Tailwind by adding a semantic color system with which components come pre-styled with. This makes it easy to switch themes and re-use components across apps. Learn more: Color System.

Accessibility

Chimera uses Radix Primitives under the hood for interactive components like accordions and selects. Learn more: Accessibility.

Customizable

Components come with sensible default styles that look great out of the box, but can be completely customized with Tailwind utility classes. Chimera uses tailwind-merge (opens in a new tab) under the hood to handle this. Learn more: Customization

Example

Change the theme in the preview below. See how the Button can take on different styles with the same JSX? The second Button is an example of how the default styles can be easily overwritten.

<Button>
  Click Me
</Button>

<Button className="text-xs w-64 rounded-full">
  Click Me
</Button>
Installation