Installation
Get started with 9ui by installing dependencies and setting up your project.
Create a new project
Follow the shadcn installation guide to create a new project. If you already have a project with shadcn setup, you can skip this step.
Add 9ui registry to your components.json
{
// existing configuration
"registries": {
"@9ui": "https://9ui.dev/r/{name}.json"
}
}Initialize 9ui
npx shadcn@latest add @9ui/init
This will update your globals.css file with the necessary styling and install the required dependencies.
Please note that shadcn includes default styles. It's recommended to review your globals.css file to check for any conflicts.
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.
<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.