import { Button } from "@chimera-ui/components";
export const ButtonExample = () => {
return (
<Button>
Boop
</Button>
);
};
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.
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>
);
};
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.
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.