Components
Explore a registry of React components built from scratch. Code copies directly to your repo for total customization and ownership.
Accordion
Expandable and collapsible content panels.
- JDABKLMN
Avatar
An image element with a fallback for representing the user.
- DefaultSecondaryOutline
Badge
Displays a badge or a component that looks like a badge.
Banner
A banner to show important information to the user.
Breadcrumb
Indicates the location within the site through a sequence of links.
Button
Interactive buttons for user actions.
Callout
Callout component to show additional content.
Card
Flexible container with header, content, and footer.
Checkbox
A control that allows the user to toggle between checked and not checked.
pnpm dlx nachui listCommand
A component for displaying and copying CLI commands.
Collapsible
Hide or show sections of content dynamically.
Dialog
Modal windows for user notifications and interactions.
Drawer
A panel that slides in from the edge of the screen to display supplementary content.
- Actions
Dropdown Menu
Menu that expands to reveal additional options.
- MA
Files
Input
A text input field with label, error handling, icon slots, and size variants.
- Ctrl+K
Kbd
A component to display keyboard shortcuts.
- *(optional)
Label
A label component with required indicator, optional text, and description support.
Popover
A floating panel with interactive content, triggered by click.
Progress
Displays an indicator showing the completion progress of a task.
Radio
A control that allows the user to select one option from a set of mutually exclusive options.
Select
Displays a list of options for the user to pick from.
- OR
Separator
A visual divider for separating content with optional label.
Skeleton
A placeholder loading component with pulse animation.
Spinner
A continuously rotating element indicating loading state.
Switch
A control that allows the user to toggle between checked and not checked.
Table
A table component to display tabular data.
Tabs
Switch between different content panels easily.
Toast
A notification system with stackable toasts, variants, and auto-dismiss.
Tooltip
A popup that displays contextual information associated with an element when it receives keyboard focus or when the user hovers over it with the mouse.
This is a default paragraph typography rendering. It uses the default font size, line height, and paragraph spacing.
Typography
A polymorphic text component for headings, paragraphs, and inline styles.
Found something to improve?
Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.