Note
Eo-N UI utilizes the shadcn cli, making it easy to install and customize components effortlessly.
Important
This setup uses Tailwind v4. Make sure your project is compatible before proceeding.
Setup shadcn.
Refer to the shadcn installation guide to configure your project.
Install Base UI using a package manager.
npm i @base-ui-components/reactAll components are in one package, and Base UI includes only what you use. learn more
Setup portals
Apply the Root class to your app layout.
<body>
<div className="Root">
{children}
</div>
</body>Modify the globals.css file.
@import "tailwindcss";
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
.Root {
@apply isolate;
}
}Learn more about portals.
Configure registry
Add the eo-n UI registry to your components.json file.
{
"registries": {
"@eo-n": "https://eo-n.vercel.app/r/{name}.json"
}
}Learn more about namespaces.