elorm/ui

Installation

Install and configure elorm/ui in your project.

Recommended

Run elorm init in your project root to scaffold configuration, tokens, and utilities automatically.

Prerequisites#

  • Node.js 20.9+
  • A React project (Next.js or Vite recommended)
  • Tailwind CSS v4 configured

Initialize#

Run the init command in your project root:

This creates:

  • elorm.json — project configuration (framework, UI library, theme)
  • lib/utils.ts — cn() utility
  • Global CSS with OKLCH design tokens

During init you'll choose:

  • Framework — Next.js or Vite
  • UI library — Base UI, Radix UI, or HeroUI
  • Base color — neutral, zinc, slate, stone, or gray
  • Accent color — blue, violet, green, orange, rose, and more
  • Border radius — default, compact, or round

Add components#

# Add multiple at once
elorm add card dialog
elorm add empty-state

Components are copied into your project at the paths defined in elorm.json.

Choosing a UI library#

elorm/ui supports three headless primitive libraries. Your choice is stored in elorm.json as uiLibrary:

LibraryBest for
Base UIModern unstyled primitives, smaller surface area
Radix UIBattle-tested ecosystem, familiar API
HeroUIReact Aria + Tailwind v4 with elorm wrapper styling (Preview — early primitives)

Non-primitive components (input, card, badge, blocks) are shared between libraries. Only headless primitives differ.

# Non-interactive init with Radix
elorm init -y --ui-library radix --base-color zinc --accent blue
 
# Non-interactive init with HeroUI
elorm init -y --ui-library heroui --base-color neutral --accent mono

Framework setup#

elorm/ui works with the Next.js App Router. Client components include "use client" automatically.

Verify installation#

IntroductionTheming