Debase UI is a design system for React.
It provides styled components and primitives built on top of Base UI, with a highly customizable theme system.
Base UI is a modern set of unstyled primitives created by skilled experts (from creators of Radix, Floating and MUI), with careful consideration given to best practices and accessibility.
Debase UI is a layer on top Base UI, proposing its own styling to the unstyled components.
Similar to shadcn/ui, AlignUI, and other similar projects, it is not a NPM library.
Instead, the documentation provides React code for each component implementation, allowing you to copy and paste it directly into your own project and adapt it to your needs. In addition to the component installation code, there are many documented use cases and examples on how to use them.
All components are styled based a short, thoughtful, set of functional design token variables. This makes it easy to set up a tailored color scheme for your application. You can also decide to ship with multiple themes.
Try it live:
... and more
Learn how to customize your own theme(s) in Theming.
Debase UI does not adopt Tailwind CSS by default.
Instead, it provides explicit CSS syntax that can be adapted for use with CSS Modules or any CSS-in-JS styling method.
We personally recommend and use zero-runtime styling solutions such as Linaria or Pigment CSS.