Everything from buttons to full dashboards, designed as one system so your screens hold together, no design team required. Delivered as React source you own.
Free core included. No subscription: one purchase, lifetime updates.
Most kits hand you components and leave the hard part, consistency, to you. Letrix ships the rules with the parts: tokens, recipes, and interaction states that agree with each other on every page.
Brand scale, gray tint, radius and type are CSS variables. Swap one value and the whole library re-themes. No find-and-replace.
Every component resolves both themes from semantic tokens. Flip a class on the root and nothing breaks.
The code you copy in the docs comes straight from the live example: what you see is exactly what you paste.
Hover, focus-visible, disabled and error states on every interactive element, keyboard paths included.
Beyond buttons: command menus, notification panels, chat threads, calendars, uploaders, charts.
Plain React + Tailwind class strings. No runtime, no styled-system, no prop soup. Eject any time; it is your code.
Sensible props, named exports, TypeScript definitions. Every example in the docs is a complete component you can drop straight into your app.
import { SocialButton } from "@/components/letrix/social-button";
export const SignIn = () => {
return (
<>
<SocialButton provider="google" />
<SocialButton provider="apple" />
</>
);
};Every component reads from CSS custom properties: brand scale, gray tint, radius, and type. Change a token and all 950+ components and variants follow, in light and dark. The docs ship with a live customizer so you can preview your brand before you buy.
Try the customizer in the docsOne purchase. Every component and update we ship, forever. Prices rise as the library grows; early buyers are grandfathered.
Core components, MIT licensed. Use anywhere.
The full library for one developer.
Up to 10 seats, priority support.