CLI

@hareru/cli generates CSS imports, inspects component details, and auto-detects your project setup.

Installation

npm install -g @hareru/cli
# or use directly with npx
npx @hareru/cli

Commands

hareru list

List all components grouped by category.

hareru list
hareru list --group form
hareru list --json

hareru info <name>

Show details for a component or task bundle. Output includes variants, props, slot tree (compound components), states, accessibility notes, and usage examples when available.

hareru info Button
hareru info agent-chat-shell

hareru init

Initialize Hareru UI in your project. Generates a managed CSS block and hareru.json config.

hareru init                          # Dry-run preview (auto-detects mode + framework)
hareru init --write                  # Apply changes
hareru init --write --mode tailwind  # Specify CSS mode
hareru init --write --force          # Overwrite existing config

The init command:

• Auto-detects your framework (Next.js, Vite, Remix, Astro) and recommends a CSS mode
• Creates a managed block in your CSS file with /* hareru:start managed */ markers
• Generates hareru.json configuration in your project root
• Adopts existing @hareru/ imports into the managed block automatically
• Validates Tailwind CSS import ordering when using tailwind mode

Managed block example (standalone):

/* hareru:start managed */
@import '@hareru/ui/styles.css';
/* hareru:end */

Managed block example (tailwind):

/* hareru:start managed */
@layer theme, base, hui, components, utilities;
@import '@hareru/tokens/css';
@import '@hareru/ui/styles/components.layer.css';
/* hareru:end */

@import 'tailwindcss';  /* app-managed, outside the block */

The @import 'tailwindcss' line is not included in the managed block. You manage it yourself.

Init options:

hareru add <name>

Generate CSS import statements for a component or bundle.

hareru add Dialog
hareru add Dialog --mode tailwind
hareru add agent-chat-shell --write

hareru update

Change the CSS mode of an existing project. Only modifies content inside the managed block.

hareru update --mode portable          # Preview changes
hareru update --mode portable --write  # Apply changes
hareru update --scope --write          # Add scope.css without changing mode

The update command:

• Reads hareru.json and the managed block from your CSS file
• Shows a diff of what will change (imports to add/remove)
• Only touches content inside /* hareru:start managed */ ... /* hareru:end */
• Warns about any @hareru/ imports found outside the managed block
• Updates hareru.json mode when --write is applied

Update options:

@import 'tailwindcss' is app-managed. The update command does not add or remove it.

CSS Modes

• add defaults to per-component when --mode is not specified.
• init auto-detects the best mode based on your project (Tailwind detected → tailwind, existing CSS reset → portable, otherwise → standalone).

Auto-Detection

The CLI automatically detects:

• CSS entry file — Searches common paths (globals.css, index.css, app.css, etc.)
• Package manager — pnpm, npm, yarn, bun (monorepo-aware lockfile discovery)
• Framework — Next.js, Vite, Remix, Astro (for init command)
• CSS mode — Recommends tailwind when Tailwind is detected, portable with existing resets, standalone otherwise