Skip to main content
EoN UI utilizes the shadcn CLI, making it easy to install and customize components effortlessly.
This setup uses Tailwind v4. Make sure your project is compatible before proceeding.
1

Setup shadcn

Refer to the shadcn installation guide to configure your project.The shadcn CLI will help you set up your project with the necessary dependencies and configuration files.
2

Install Base UI

Install Base UI components using your preferred package manager:
npm i @base-ui-components/react
All components are in one package, and Base UI includes only what you use. Learn more about Base UI’s tree-shaking capabilities.
3

Setup portals

Apply the Root class to your app layout for proper portal rendering:
layout.tsx
<body>
  <div className="Root">
    {children}
  </div>
</body>
Modify the globals.css file to include the Root class styles:
globals.css
@import "tailwindcss";

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  .Root {
    @apply isolate;
  }
}
Learn more about portals in the Base UI documentation.
4

Configure registry

Add the EoN UI registry to your components.json file:
components.json
{
  "registries": {
    "@eo-n": "https://eo-n.vercel.app/r/{name}"
  }
}
Learn more about namespaces in the shadcn documentation.
5

Start adding components

You can now start adding components to your project using the shadcn CLI:
npx shadcn@latest add @eo-n/button
That’s it! You’re ready to build with EoN UI components.

​
Project Dependencies

EoN UI includes the following key dependencies:

​
Core Dependencies

  • @base-ui/react (v1.0.0) - Base UI component primitives
  • Next.js (v16.0.8) - React framework
  • React (v19.1.1) - UI library
  • Tailwind CSS (v4.1.2) - Utility-first CSS framework

​
Radix UI Components

  • @radix-ui/react-collapsible - Collapsible component
  • @radix-ui/react-label - Accessible label component
  • @radix-ui/react-slot - Slot component for composition
  • @radix-ui/react-tooltip - Tooltip component

​
Utilities

  • class-variance-authority - CVA for component variants
  • clsx - Utility for constructing className strings
  • tailwind-merge - Merge Tailwind CSS classes
  • tailwindcss-animate - Animation utilities for Tailwind
  • lucide-react - Icon library

​
Next Steps

Browse Components

Explore the available components and see examples

Dark Mode

Learn how to add dark mode to your application

Form Components

Build interactive forms with accessible components

GitHub

View the source code and contribute

Build docs developers (and LLMs) love

Get started for freeTalk to us