Installation

Get started with 9ui by installing dependencies and setting up your project.

Create a new project

npx shadcn@latest init https://9ui.dev/r/init.json

or you can follow the shadcn installation guide if your framework doesn't support shadcn init.

Add 9ui registry to your `components.json`

components.json

{
	// existing configuration
	"registries": {
		"@9ui": "https://9ui.dev/r/{name}.json"
	}
}

Initialize MCP

This step adds the necessary configuration to allow you to use the components directly in your code with AI assistance. The AI will have full context of the entire 9ui registry.

npx shadcn@latest mcp init

Add the root wrapper to your layout

Add the root class to your app layout to ensure proper styling isolation and theme application.

layout.tsx

<body>
	<div className="root">{children}</div>
</body>

Start using 9ui components

Your project is now ready! You can start installing and using 9ui components in your application.

Icon Libraries

9ui components use lucide-react as the default icon library, which provides a comprehensive set of beautiful, consistent icons.

Alternative Icon Libraries

For additional icon options, consider these popular alternatives:

Monicon - Access over 200,000 icons from various popular libraries in a unified interface
pqoqubbw/icons - A curated collection of animated icons for enhanced user interactions

These libraries can be used alongside or instead of lucide-react depending on your project's specific needs.