Skip to main content

​
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 or Radix UI
  • 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 two 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
Non-primitive components (input, card, badge, blocks) are shared between both libraries. Only headless primitives differ. 
# Non-interactive init with Radix
elorm init -y --ui-library radix --base-color zinc --accent blue

​
Framework setup

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

​
Verify installation