Installation
Installing dependencies and setting up the project.
Setup shadcn.
Follow the shadcn installation guide to setup your project.
Install Base UI.
npm install @base-ui-components/react
Add Root class to your app layout.
layout.tsx
<body>
<div className="Root">{children}</div>
</body>Update globals.css file.
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
{/* Existing code */}
@layer base {
.Root {
@apply bg-background isolate;
}
}Add 9ui theme to your project.
npx shadcn@latest add "https://9ui.dev/r/theme.json"
That's it! You can now install the components.
Icons
9ui uses lucide-react for icons.
For a more extensive collection of icons, consider using Monicon, which offers over 200,000 icons from various popular libraries.
If you are looking for animated icons, the pqoqubbw/icons library is a great choice.