Get Started

Set up Honest UI, add a Button, and confirm that its source is part of your project. The CLI creates the shared configuration, copies component files, and installs the dependencies they need.

Run this guide from the root of an existing project with:

• Node.js 20.18.1 or later.
• React 19.
• Tailwind CSS v4.
• A global stylesheet, such as app/globals.css.

The CLI detects supported project structures and asks where shared styles and copied files should go. You can use aliases such as @/components and @/lib, but the exact aliases are your choice.

Run:

npx honestui@latest init

The CLI creates components.json, records your aliases and stylesheet path, and installs the base styles and dependencies used by copied components. Review the prompts before accepting them because they determine where later components are written.

If components.json already exists, the CLI asks before replacing it. Review the current file and commit or save your work before choosing to overwrite it.

Add Button after initialization:

The CLI shows the files and packages it plans to add. To inspect the change without writing files, run:

npx honestui@latest add button --dry-run

With the common @/components/ui alias, the copied source is available from @/components/ui/button. Your configured path may differ.

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

export function SaveProfileButton() {
  return <Button>Save profile</Button>
}

Start your application and confirm that:

• The button renders with the base styles.
• The focus indicator is visible when you reach it with Tab.
• The copied component file is present at the path configured in components.json.

You can now edit the component source and its variants as normal project code.

Every component page includes its CLI name. For example:

Start with Field and the specific controls you need for forms. Use Dialog for focused work, Table for tabular data, and Toast for brief, noncritical feedback.

Use manual installation when you want to review and place every file yourself:

1. Open the component page.
2. Select the manual installation tab.
3. Copy the component source and any supporting files.
4. Install the listed dependencies.
5. Confirm that the shared Honest UI styles are available.
6. Update imports to match your aliases.
7. Test the rendered component and its keyboard behavior.

Copy the complete component structure. Removing labels, descriptions, focus handling, or primitive parts can change its behavior and accessibility.

The component CLI is not the installation path for every Honest UI collection. Charts, icons, logos, vectors, and shaders are installed from the honestui package and imported through dedicated entry points.

Read Theme before changing shared tokens, Styling before changing copied component classes, and Accessibility before changing component semantics or interaction behavior.