Get Started

This guide shows the fastest path to using Honest UI in a React project.

Honest UI components are meant to live in your app. The CLI copies component code, installs required dependencies, and leaves you with files you can edit.

Before adding components, make sure your project has:

• React.
• Tailwind CSS v4.
• A global stylesheet, such as app/globals.css.
• A component import alias, such as @/components/ui.

If your app does not use the same import alias, you can still use Honest UI. Update the import paths after copying a component.

Run the CLI from your project root:

npx honestui@latest add base

This installs the shared setup that most components expect. It may add CSS variables, utility helpers, and dependencies used by Honest UI components.

After installation, check the changed files before committing. The generated files are normal project files, so you can edit them.

Add components one at a time:

npx honestui@latest add button

Replace button with the component name from the docs. For example, use dialog, select, tabs, or toast.

Every Honest UI component page includes the exact CLI command to install it.

Manual setup is useful when you want to review every line before it enters your project.

1. Open a component page in the docs.
2. Copy the code from the Code tab.
3. Paste it into your project.
4. Install any listed dependencies.
5. Copy any required CSS variables.
6. Update import paths to match your app.

Use Styling when a component relies on shared colors or state tokens.

For a basic product screen, start with:

• Button for actions.
• Input and Field for forms.
• Dialog for focused tasks.
• Table for structured data.
• Toast for short feedback.

For a complete form, combine Form, Field, and the specific controls you need.

Browse Our Components to understand how the component pages are organized.

Read Accessibility before changing keyboard behavior, focus styles, labels, or validation messages.

If you want to contribute back to Honest UI, read the Contributing Guide.