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
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";
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;