eo-n/ui
UIGetting StartedInstallation

Installation

Learn how to set up dependencies and organize your application structure.

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.

layout.tsx
<body>
  <div className="Root">
    {children}
  </div>
</body>

Modify the globals.css file.

globals.css
@import "tailwindcss";
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  .Root {
    @apply isolate;
  }
 
}

Learn more about portals.

🎉 That's it!

You can now start adding components to your project.

npx shadcn@latest add "https://eo-n.vercel.app/r/button"

Previous

Introduction

Next

Dark Mode

On this page