Skip to documentation content
|

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.

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

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

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

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

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

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.