Rad UI is still under active development. You are free to use it in your projects, but expect breaking changes. If you'd like to contribute to Rad UI, please check out Getting Started

Usage

Importing Rad UI

Let's take a look at how you can use Rad UI in your project. Importing Rad UI components is super easy. You can import the components you want to use from the library and use them. We encourage you to write wrappers around the components and make use of the APIs to create your own components and abstract away the features you don't need.

import Button from "@radui/ui/Button"

const MyButtonComponent = () => {
    return <Button>Click Me</Button>
}

export default MyButtonComponent
Importing base styles

Rad UI is headless, meaning it doesn't come with any styles. But we do ship a default theme that you can use to get quickly started off the ground.

import "@radui/ui/themes/default.css";
Importing tailwind presets

If you need the default theme and would like to plugin Rad UI tokens into your tailwind project. You can import default presets that you can directly use.

 // tailwind.config.js

const config = {
  presets:[
    require("@radui/ui/themes/tailwind-presets/default.js") // import this
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
export default config;
Accessibility