Installation

Requirements

• React project (Next.js or Vite)
• Tailwind CSS v4
• TypeScript (recommended)

Initialize

pnpm dlx stera-ui@latest init

init detects your project structure, writes stera.config.json, creates stera-ui.css with the design tokens, and installs tw-animate-css.

Add components

pnpm dlx stera-ui@latest add button

Multiple at once:

pnpm dlx stera-ui@latest add button dialog dropdown-menu

Registry dependencies are resolved automatically — adding dialog also pulls in button and utils if missing.

Flags

• --yes — skip prompts and accept defaults
• --overwrite — replace existing files without asking

Refresh design tokens

pnpm dlx stera-ui@latest add globals

Re-pulls the latest stera-ui.css from the registry. Use this to pick up token updates without re-adding components.

List components

pnpm dlx stera-ui list

Groups components by type: ui, component, font, hook, lib, style.

Project structure

After init:

your-project/
├── stera.config.json       # Stera UI configuration
└── styles/
    ├── globals.css          # Imports stera-ui.css + peer styles
    └── stera-ui.css         # Design tokens + utilities

After your first stera-ui add:

your-project/
├── stera.config.json
├── components/
│   └── ui/                  # Installed components
│       └── button.tsx
├── lib/
│   └── utils.ts             # cn() utility
└── styles/
    ├── globals.css
    └── stera-ui.css