# Get Started

> Set up Honest UI, add a component, and verify the files in your project.

Source: https://www.honestui.com/docs/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.

## Before you start [#before-you-start]

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.

## 1. Initialize Honest UI [#1-initialize-honest-ui]

Run:

```bash
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.

## 2. Add your first component [#2-add-your-first-component]

Add Button after initialization:

<CliBlock commands="[&#x22;button&#x22;]" />

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

```bash
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.

## 3. Render the component [#3-render-the-component]

```tsx
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.

## Add more UI components [#add-more-ui-components]

Every component page includes its CLI name. For example:

<CliBlock commands="[&#x22;dialog&#x22;, &#x22;select&#x22;, &#x22;tabs&#x22;]" />

Start with [Field](/docs/components/field) and the specific controls you need for forms. Use [Dialog](/docs/components/dialog) for focused work, [Table](/docs/components/table) for tabular data, and [Toast](/docs/components/toast) for brief, noncritical feedback.

## Install manually [#install-manually]

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.

## Package-based collections [#package-based-collections]

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.

| Collection                | Next step                                         |
| ------------------------- | ------------------------------------------------- |
| Charts                    | [Install charts](/docs/charts/installation)       |
| Icons, logos, and vectors | [Install visual assets](/docs/icons/installation) |
| Shaders                   | [Install shaders](/docs/shaders/installation)     |

Read [Theme](/docs/theme/overview) before changing shared tokens, [Styling](/docs/styling) before changing copied component classes, and [Accessibility](/docs/accessibility) before changing component semantics or interaction behavior.