Introduction
A collection of composable React components built with Base UI and Tailwind CSS, designed for clarity, speed, and complete code ownership. Inspired by Shadcn.
Lumi UI is a collection of beautifully designed, accessible React components that you can copy and paste into your apps.
It is built on top of Base UI and styled with Tailwind CSS.
It's not a component library. Instead, you can think of it as a collection of components that you can copy and paste into your apps and customize to your needs.
Why Lumi UI?
Lumi UI offers a unique blend of features that make it an ideal choice for modern web development:
- shadcn-Compatible: If you're familiar with shadcn/ui, you'll feel right at home with Lumi UI's API patterns.
- Copy & Paste Integration: Seamlessly integrate components into your project by copying them directly.
- Accessible by Default: Built on Base UI's WCAG-compliant primitives, ensuring accessibility is a core feature.
- Fully Customizable: Take complete ownership of your code. Modify and adapt components without the need to eject or fork.
- Native TypeScript Support: Enjoy the benefits of strict typing and an excellent developer experience from the start.
Philosophy
Own Your Code
Every component is yours to shape. There's no need to navigate complex abstraction layers—simply edit the files directly to match your vision.
Optimized Developer Experience
With polished preset designs, customization is straightforward and intuitive, allowing you to focus on what matters most.
Accessibility First
Leveraging Base UI's accessible primitives, Lumi UI components come with ARIA attributes, keyboard navigation, and screen reader support built-in.