Introduction
Lyse UI is a set of beautifully-designed, accessible components and a design system distribution platform. Works with React 19, Tailwind CSS v4, and Radix UI. Open Source. Open Code.
This is not a component library. It is how you build your component library.
You know how most traditional component libraries work: you install a package from NPM, import the components, and use them in your app.
This approach works well until you need to customize a component to fit your design system or require one that isn't included in the library. Often, you end up wrapping library components, writing workarounds to override styles, or mixing components from different libraries with incompatible APIs.
This is what Lyse UI aims to solve. It is built around the following principles:
- Open Code: The top layer of your component code is open for modification.
- Token-Driven: A 3-layer design token system powers consistent theming across light and dark modes.
- Composition: Every component uses CVA and Radix for composable, predictable APIs.
- Distribution: A flat-file schema and the shadcn CLI make it easy to distribute components.
- Beautiful Defaults: Great design from the Lyse Design System, out of the box.
Open Code
Lyse UI hands you the actual component code. You have full control to customize and extend every component to fit your project. No more fighting library abstractions or overriding styles with !important.
Each component follows a dual-file pattern: a .tsx file for structure and variants, and a .css file for theming. Change the look without touching the logic.
Token-Driven
Every visual property flows from CSS custom properties across 3 layers: primitives, semantics, and a shadcn bridge. This means your components automatically adapt to light and dark modes, and you can retheme everything by changing token values.
Learn more about the token architecture on the Tokens page.
Composition
Every component uses a common, composable interface. Class Variance Authority (CVA) handles variants predictably, Radix UI primitives provide accessibility, and the cn() helper merges classes safely with tailwind-merge.
Distribution
Lyse UI uses the shadcn registry format. A flat-file schema and the shadcn CLI make it easy to add components to any project. No package installs, no version conflicts. Just copy the code you need.
Beautiful Defaults
Components ship with carefully chosen default styles from the Lyse Design System. You get clean, minimal aesthetics with consistent spacing, typography, and color out of the box. Every detail has been considered so you can start building immediately.