EoN UI Documentation

Quick start

Get started with EoN UI in minutes. Follow these steps to integrate components into your project.

Install dependencies

Set up shadcn and Base UI in your project.

npm

npm install @base-ui/react

pnpm

pnpm add @base-ui/react

Configure shadcn following their installation guide.

Configure the registry

Add the EoN UI registry to your components.json file.

components.json

{
  "registries": {
    "@eo-n": "https://eo-n.vercel.app/r/{name}"
  }
}

Add your first component

Install components using the shadcn CLI with the @eo-n namespace.

npx shadcn@latest add @eo-n/button

Use it in your application:

import { Button } from "@/components/ui/button";

export default function App() {
  return <Button>Click me</Button>;
}

Explore components

Browse our collection of accessible and customizable components organized by category.

Form components

Interactive form elements including buttons, inputs, selects, and checkboxes.

Layout components

Structural components like cards, tabs, accordions, and separators.

Navigation components

Navigation menus, dropdowns, context menus, and menubars.

Overlay components

Modals, dialogs, sheets, popovers, and tooltips for overlay content.

Display components

Visual elements like avatars, badges, progress indicators, and toasts.

Utility components

Utility components including toolbars, toggles, and emoji pickers.

Why EoN UI?

Built on proven foundations with modern best practices.

Accessibility first

WAI-ARIA compliant components with keyboard navigation and screen reader support.

Fully customizable

Unstyled primitives with complete control over appearance and behavior.

TypeScript native

Full type safety with comprehensive TypeScript definitions and autocomplete.

Tailwind CSS v4

Built with the latest Tailwind CSS v4 for modern, performant styling.

Composable

Mix and match components to create unique interfaces tailored to your needs.

No bundle bloat

Tree-shakeable components that include only what you use in your bundle.

Getting Started

Guides

Form Components

Layout Components

Navigation Components

Overlay Components

Display Components

Utility Components

Build with accessible, customizable UI components