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


A component library built on top of another component library? Why would you do such a thing?

Radix is great for accessible & interactive components, but they come completely unstyled. No point in rebuilding that, because I wouldn't be able to do it better than the Radix team. Many Chimera components are essentially Radix components that have been pre-styled a Chimera flavored Tailwind.

This looks really similar to shadcn/ui. What is the difference?

You would be right! I used many of the components from shadcn/ui as a starting point. The key differences are:

  • Chimera components are styled with a semantic color system.
  • With shadcn/ui, you copy and paste components into your library. Chimera is a library that you can import components from.
  • Small semantic differences. Shadcn renames components from Radix. Chimera uses the same naming conventions as Radix.
Why did you choose to use a semantic color system?

I wanted to create a library that would be easy to use for people who are new to design systems. I chose to use a semantic color system because it is easy to understand and use. It also allows for a lot of flexibility in how you want to use colors in your project. For example, you can use the same color for multiple components or you can use different colors for the same component.

Seems like a pretty big package size and requires named exports. Will this bloat my app?

Chimera is tree-shakeable. If you are using Next 12+ or a bundler that supports tree shaking, you should be fine.