HeroUI
Accessible React components built on React Aria: buttons, forms and fields, date pickers and calendars, colour pickers, tables, modals, drawers and toasts, delivered through @heroui/react.
71 published items
HeroUI
110 published items
Overlay
A modal confirmation prompt for consequential actions that requires a deliberate response before continuing.
ReactTailwind
Input
A text input that suggests matching options as a person types and supports choosing from the filtered results.
ReactTailwind
Navigation
A hierarchical navigation trail that shows the current page's location and links back through its ancestors.
ReactTailwind
Button
A visually connected set of related actions that keeps buttons aligned and communicates their shared context.
ReactTailwind
A labeled collection of checkboxes for choosing any number of related options as one form field.
ReactTailwind
Button
A compact icon-only action for dismissing dialogs, popovers, banners, tags, and other temporary interface elements.
ReactTailwind
Input
A two-dimensional color control for adjusting two channels, such as saturation and brightness, by moving a selector across a gradient.
ReactTailwind
Input
A text field for entering and editing a color value in a supported color format.
ReactTailwind
Input
A composed control for choosing a color through visual controls and editable values, often presented from a trigger.
ReactTailwind
Input
A track control for adjusting one color channel, such as hue, saturation, brightness, or alpha.
ReactTailwind
A selectable collection of color samples for choosing one or more colors from a predefined palette.
ReactTailwind
Primitive
A small visual sample that displays a color and can represent a selectable or read-only color value.
ReactTailwindOther
Input
A segmented text input for entering and editing date parts such as month, day, and year with locale-aware formatting.
ReactTailwind
Input
A date field paired with a popover calendar so people can type a date or choose one from a month grid.
ReactTailwind
A paired date input with a popover calendar for selecting a start date and end date as one range.
ReactTailwind
Supporting text for a form control or interface element that explains its purpose, expected value, or constraints.
ReactTailwind
Accordion
A coordinated set of disclosure panels for organizing multiple independently expandable sections.
ReactTailwind
Accordion
A trigger and content panel that reveals or hides a single section of supplementary information.
ReactTailwind
Feedback
A concise validation or failure message that explains what went wrong and helps a person recover.
ReactTailwind
Feedback
An accessible validation message associated with a specific form field and shown when its value is invalid.
ReactTailwind
Input
A composed field that visually joins an input with related prefixes, suffixes, icons, or action controls.
ReactTailwind
Input
A numeric input with formatting, validation and step controls for increasing or decreasing a value.
ReactTailwind
Navigation
A page navigation control for moving through a divided collection with numbered pages and previous or next actions.
ReactTailwind
Loader
A horizontal indicator that communicates the completion of a task, either as a known percentage or an indeterminate wait.
ReactTailwind
Loader
A circular indicator that shows task completion or an indeterminate operation in a compact area.
ReactTailwind