Accordion
A collapsible content panel for organizing information in a compact space, with single or multiple expansion modes and animated content transitions.
ExpoExpo Go
HeroUI
110 items2 collectionsheroui.comGitHubXDiscord
Overlay
A modal confirmation prompt for consequential actions that requires a deliberate response before continuing.
ReactTailwind
Feedback
An inline status message with an indicator, title and description for important information, warnings, successes and errors.
ExpoExpo Go
Input
A text input that suggests matching options as a person types and supports choosing from the filtered results.
ReactTailwind
Avatar
A user identity image with animated loading and fallbacks for initials, custom content or a default person icon.
ExpoExpo Go
Overlay
A modal panel that slides up from the bottom of the screen with snap points, scrollable content and swipe-to-dismiss gestures.
ExpoExpo Go
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
Button
HeroUI Native's button for Expo and bare React Native apps: solid, outline, ghost and danger looks in three sizes, with pressed-state feedback that feels native on iOS and Android.
ExpoExpo Go
A surface-based container with header, body, title, description and footer sections for presenting structured content and actions.
ExpoExpo Go
A labeled collection of checkboxes for choosing any number of related options as one form field.
ReactTailwind
A selectable form control for toggling a checked state, with an animated default checkmark and disabled or invalid states.
ExpoExpo Go
Badge
A compact capsule-shaped element for short labels or custom content, with configurable size, color and visual treatment.
ExpoExpo Go
An icon-only button for closing dialogs and modals or dismissing content, with a ready-made close glyph and press styling.
ExpoExpo Go
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
A pressable form row that combines a label and description with a switch, checkbox or radio control while sharing disabled and validation state.
ExpoExpo Go
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
Muted supporting text for accessible form-field descriptions, helper copy and other secondary interface guidance.
ExpoExpo Go
Supporting text for a form control or interface element that explains its purpose, expected value, or constraints.
ReactTailwind
Overlay
A centered modal overlay with trigger, backdrop and accessible title and description parts, plus animated drag-to-dismiss gestures.
ExpoExpo Go
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 animated validation message that appears for invalid form fields and automatically consumes surrounding field state.
ExpoExpo Go
Feedback
An accessible validation message associated with a specific form field and shown when its value is invalid.
ReactTailwind
A compound text-input layout with measured prefix and suffix slots that automatically make room for icons, labels or actions.
ExpoExpo Go