Installation

Installing dependencies and setting up the project.

Important

The installation of 9ui depends on the shadcn cli for setting up your project and installing the components. Note that 9ui does not support Tailwind V4 yet. Please use shadcn@2.3.0 for the setup.

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.