# React UI Components

> Browse open-source React UI components for forms, navigation, overlays, feedback, and data display. Copy the source into your project and adapt it.

Source: https://www.honestui.com/docs/component-guide

Honest UI provides open-source React UI components for common product-interface tasks. Use the CLI to copy each component into your project, then edit the source, variants, and styling without depending on a closed component API.

Component pages follow a shared structure so you can decide whether a component fits, install it, and adapt it without guessing which behavior must remain intact.

Each page explains what the component is for, how to install it, how to import it, and which examples show the important states.

## Browse UI components [#browse-ui-components]

* **Actions and feedback:** [Alert](/docs/components/alert), [Alert Dialog](/docs/components/alert-dialog), [Button](/docs/components/button), [Empty](/docs/components/empty), [Progress](/docs/components/progress), [Skeleton](/docs/components/skeleton), [Toast](/docs/components/toast), and [Toggle](/docs/components/toggle).
* **Forms and input:** [Autocomplete](/docs/components/autocomplete), [Checkbox](/docs/components/checkbox), [Color Picker](/docs/components/color-picker), [Combobox](/docs/components/combobox), [Field](/docs/components/field), [Fieldset](/docs/components/fieldset), [Form](/docs/components/form), [Input](/docs/components/input), [Input Group](/docs/components/input-group), [Label](/docs/components/label), [Number Field](/docs/components/number-field), [Radio Group](/docs/components/radio-group), [Select](/docs/components/select), [Slider](/docs/components/slider), [Switch](/docs/components/switch), and [Textarea](/docs/components/textarea).
* **Navigation and overlays:** [Breadcrumb](/docs/components/breadcrumb), [Command](/docs/components/command), [Context Menu](/docs/components/context-menu), [Dialog](/docs/components/dialog), [Menu](/docs/components/menu), [Pagination](/docs/components/pagination), [Popover](/docs/components/popover), [Preview Card](/docs/components/preview-card), [Scroll Area](/docs/components/scroll-area), [Sheet](/docs/components/sheet), [Tabs](/docs/components/tabs), [Toolbar](/docs/components/toolbar), and [Tooltip](/docs/components/tooltip).
* **Content, data, and layout:** [Accordion](/docs/components/accordion), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Card](/docs/components/card), [Collapsible](/docs/components/collapsible), [Frame](/docs/components/frame), [Group](/docs/components/group), [Kanban List](/docs/components/kanban-list), [Meter](/docs/components/meter), [Separator](/docs/components/separator), and [Table](/docs/components/table).

## Page structure [#page-structure]

Component pages include:

* **What it does:** the task the component supports.
* **When to use it:** where it fits and which component to use instead when it does not.
* **Anatomy:** the parts and how they work together.
* **Behavior and states:** controlled values, loading, errors, disabled states, and forms when they apply.
* **Accessibility:** behavior supplied by the component and responsibilities that remain in your application.
* **Installation:** the CLI command and manual source.
* **Usage:** the smallest useful example.
* **Examples:** variants, sizes, states, form usage, and composition patterns.

If a component is built on Base UI, the page may link to the Base UI API reference for lower-level behavior and props.

## Choosing a component [#choosing-a-component]

Use the component that matches the user's task:

* Use **Button** for actions.
* Use a **link** for navigation. Use Button's link rendering only when you need Button styling on a real link destination.
* Use **Checkbox** for independent yes/no choices.
* Use **Radio Group** when only one option can be selected.
* Use **Select** when the user chooses from a known list.
* Use **Combobox** or **Autocomplete** when search helps the user find an option.
* Use **Dialog** for focused work that interrupts the page.
* Use **Sheet** for side panels, details, and secondary workflows.
* Use **Toast** for short feedback that does not need a response.
* Use a **Dialog with an explicit confirmation action** when the user must make a consequential decision before continuing.

## Copying examples [#copying-examples]

Examples are not only visual demos. They show recommended structure.

When you copy an example:

1. Keep the accessibility parts, such as labels, descriptions, and triggers.
2. Replace sample text with copy that names the real task and outcome.
3. Keep disabled, loading, and error states if the workflow can reach those states.
4. Update imports to match your project.
5. Test the complete example with keyboard navigation and the assistive technologies your product supports.

## Building larger screens [#building-larger-screens]

Combine components by responsibility:

* Use **Field** around form controls so labels and errors stay consistent.
* Use **Card** or **Frame** to group related content.
* Use **Tabs** when related views share the same page context.
* Use **Menu** for compact command lists.
* Use **Toolbar** when controls act on the same surface.
* Use **Empty** when a section has no data yet.

Start with the smallest component that solves the interaction. Add more structure only when the user needs it.

## Customizing components [#customizing-components]

Copied Honest UI components are meant to be edited.

Common customizations include:

* Changing class names.
* Adjusting color variables.
* Adding variants.
* Replacing icons.
* Renaming files or import paths.
* Wrapping a component in your app-specific API.

Keep behavior and accessibility intact when customizing. Style changes are usually safe. Changes to focus management, keyboard navigation, roles, labels, and portals need more care.