To use Debase UI components, your project needs to use React 19+.
If your project uses a lower version of React, it might still work. However, all components are tested with React 19+, and made compatible with the latest RSC paradigm ("React Server Components") that include the "use client" directive (when client-side JS is necessary).
Debase UI is a layer on top of Base UI primitives. Therefore, you first need to install it first.
npm i @base-ui-components/reactIcons used throughout the components are from the Lucide icon library. You can also install it.
npm install lucide-reactIf you prefer to use your own icons, you can skip the installation of Lucide, and substitute any icons to the solution of your choice when adding Debase UI components in your project.
Both Base UI and Lucide are tree-shakeable, so your app bundle will contain only the components that you actually use.
Define these CSS variables at the root of your project.
They are used across all components' styles. You can use these values as a starting point, and tweak them later as you need.
:root {
--debase__text__base: #262626;
}Using CSS variables is a flexible method to define reusable values.
However, if you prefer, you can also define these values within your own styling solution, such as a context, variables, or theme provider. Values simply need to be accessible when applying styling to the Debase UI components.
Learn how to customize your theme by visiting the Theming section.
Once you find a component you'd like to add it to your projects, simply copy and paste the provided code.
You can use any CSS styling solution of your choice. All the styles are provided using the styled() or css() syntax. It can be transposed to any popular styling solution, including CSS Modules, or CSS-in-JS libraries (styled-components, Emotion, Linaria, Pigment CSS...), as long as you adjust to the minor differences of syntax.