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

Infinitely customizable,

Theme-adaptive,

Importable,

Accessible,

React + Tailwind components

Chimera not only allows you to build beautiful and accessible interfaces faster than ever before, but it makes re-using Tailwind styles across your projects much easier. Free & open source. Works great with Next.js!
Get Started
Learn More
🏃🏻‍♂️ Sprint 3
Create new landing page
Finish the components and documentation
1 day
Add tsdocs
Add default types to the tsdoc descriptions for all components
2 days
Add Toast component
Maybe check out react-hot-toast
2 days
Create color system cheat sheet
A quick reference for when someone isn't sure what color to use
2 days
Re-write introduction page
Current page is too long and not very clear
2 days
Add Card component
Add more components to Chimera UI
2 days
Change a color!Change a color!
Learn More
import { Button } from "@chimera-ui/components";

export const ButtonExample = () => {
  return (
    <Button>
      Boop
    </Button>
  );
};

Importable & tree-shakeable components that look great out of the box, no re-styling necessary

No more copy, pasting, and restyling, like you have to from other Tailwind libraries. Just import it and it will instantly pick up the theme you’ve set.

Customize with the Tailwind, like you would with any other HTML element

No need to learn a new library-specific styling stystem. All you need is the Tailwind you already know and love.

import { Button } from "@chimera-ui/components";

export const ButtonExample = () => {
  return (
    <Button className="w-full h-18 text-2xl bg-gradient-to-r from-primary to-secondary">
      BOOOOOOOOOOOP
    </Button>
  );
};
bg-basebg-base
Credit Card Info
bg-base-contentbg-base-content
bg-inputbg-input
text-base-content-2text-base-content-2

This is some fake fine print. If you're reading this, I hope you enjoy using Chimera! If you do or don't, drop me a line. Would love to know what you think.

text-base-content-3text-base-content-3
bg-primary text-primary-contentbg-primary text-primary-content

A color for every situation

Chimera themes uses an intuitive semantic color system which uses color modifiers to make it easy to pick the right color in any situation. Putting text on a background of primary? Just use primary-content. Start by picking 3 colors, and the theme generator will take care of generating the 58 variations you might need to reach for.

Out of the box accessibility

Chimera uses Radix Primitives under the hood, which means you get all of the awesome features that come with it. WAI-ARIA compliant, keyboard navigable, focus management, screen reader compatibility, collision awareness, and more.