Installation

Installing dependencies and setting up the project.

Important

9ui installation relies on shadcn cli to setting up your project and install the components.

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. You can replace it with the icon library of your choice. Monicon provides 200,000+ icons from popular libraries. I recommend you to use it.