Introduction
Production-ready components built from a real design system. 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.
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.
Figma Library
This file contains the library used to build Lyse, shared openly with the community. You'll find production-ready components and foundations, structured and maintained as they are in a real product.
This library is also a practical way to explore Lyse, an AI assistant that turns component changes in Figma into tickets automatically. By modifying components and publishing the library, you can see how real design changes are detected and transformed into structured tickets.
Use it as a solid base for your own design system, a reference for structuring components and variants, or a sandbox to test how Lyse works on real component updates.
