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/react
All 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.