Dev Design Library

HeroUI components

🚀 Beautiful, fast and modern React UI library. (Previously NextUI)

Components
75
Framework
React
Stack
React, TypeScript, Tailwind
License
Apache-2.0
GitHub stars
30,881
Source
https://github.com/heroui-inc/heroui
Website
https://heroui.com
Install
npm install @heroui/react

All HeroUI components

  • Accordion: A collapsible content panel for organizing information in a compact space
  • Alert: Displays important messages and notifications to users with status indicators.
  • Alert Dialog: Modal dialog for critical confirmations requiring user attention and explicit action
  • Autocomplete: An autocomplete combines a select with filtering, allowing users to search and select from a list of options
  • Avatar: Displays a user avatar with support for images, text initials, or fallback icons.
  • Avatar Group: Display a stacked or grid group of avatars with overflow counting
  • Badge: Displays a small indicator positioned relative to another element, commonly used for notification counts, status dots, and labels
  • Breadcrumbs: Navigation breadcrumbs showing the current page's location within a hierarchy
  • Button: Interactive component that triggers an action when pressed.
  • Button Group: Group related buttons together with consistent styling and spacing
  • Calendar: Composable date picker with month grid, navigation, and year picker support built on React Aria Calendar
  • Card: Displays a card container with flexible layout sections for structured content.
  • Checkbox: A selectable control that allows users to toggle between checked and unchecked states.
  • Checkbox Group: A checkbox group component for managing multiple checkbox selections
  • Chip: Displays a compact element in a capsule shape.
  • Close Button: Button component for closing dialogs, modals, or dismissing content.
  • Color Area: A 2D color picker that allows users to select colors from a gradient area
  • Color Field: Color input field with labels, descriptions, and validation built on React Aria ColorField
  • Color Picker: A composable color picker that synchronizes color value between multiple color components
  • Color Slider: A color slider allows users to adjust an individual channel of a color value
  • Color Swatch: A visual preview of a color value with accessibility support
  • Color Swatch Picker: A list of color swatches that allows users to select a color from a predefined palette.
  • Combo Box: A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query
  • Date Field: Date input field with labels, descriptions, and validation built on React Aria DateField
  • Date Picker: Composable date picker built on React Aria DatePicker with DateField and Calendar composition
  • Date Range Picker: Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition
  • Description: Text component for providing accessible descriptions and helper text for form fields and other UI elements.
  • Disclosure: A disclosure is a collapsible section with a header containing a heading and a trigger button, and a panel that wraps the content.
  • Disclosure Group: Container that manages multiple Disclosure items with coordinated expanded states
  • Drawer: Slide-out panel for supplementary content and actions
  • Dropdown: A dropdown displays a list of actions or options that a user can choose
  • Empty State
  • Error Message: A low-level error message component for displaying errors
  • Field Error: Displays validation error message content with smooth animations.
  • Fieldset: Group related form controls with legends, descriptions, and actions
  • Form: Wrapper component for form validation and submission handling
  • Input: A text input component with styled border and background for collecting user input.
  • Input Group: A compound layout component that groups an input with optional prefix and suffix decorators.
  • Input Otp: Input component for entering one-time passwords (OTP) with individual character slots, animations, and validation support.
  • Kbd: Display keyboard shortcuts and key combinations
  • Label: Text component for labeling form fields and other UI elements with support for required indicators and validation states.
  • Link: A styled anchor component for navigation with built-in icon support
  • List Box: A listbox displays a list of options and allows a user to select one or more of them
  • Meter: A meter represents a quantity within a known range, or a fractional value.
  • Modal: Dialog overlay for focused user interactions and important content
  • Number Field: Number input fields with increment/decrement buttons, validation, and internationalized formatting
  • Pagination: Page navigation with composable page links, previous/next buttons, and ellipsis indicators
  • Popover: Displays a floating content panel anchored to a trigger element with placement and alignment options.
  • Progress Bar: A progress bar shows either determinate or indeterminate progress of an operation over time.
  • Progress Circle: A circular progress indicator that shows determinate or indeterminate progress.
  • Radio Group: A set of radio buttons where only one option can be selected at a time.
  • Range Calendar: Composable date range picker with month grid, navigation, and year picker support built on React Aria RangeCalendar
  • Scroll Shadow: Adds dynamic gradient shadows to scrollable content based on scroll position and overflow.
  • Search Field: A compound search input for filtering and querying content.
  • Select: Displays a list of options for the user to pick from — triggered by a button.
  • Separator: A simple line to separate content visually.
  • Sheet: Swipeable overlay with native scroll snapping, partial positions, and nested sheets
  • Skeleton: Displays a loading placeholder with shimmer or pulse animation effects.
  • Slider: A draggable input for selecting a value or range within a bounded interval.
  • Spinner: Displays an animated loading indicator.
  • Surface: Container component that provides elevation and background styling.
  • Switch: A toggle control that allows users to switch between on and off states.
  • Switch Group
  • Table: Tables display structured data in rows and columns with support for sorting, selection, column resizing, and infinite scrolling.
  • Tabs: Organize content into tabbed views with animated transitions and indicators.
  • Tag Group: A compound component for displaying and managing selectable tags with optional removal.
  • Textarea: A multiline text input component with styled border and background for collecting longer user input.
  • Textfield: A text input component with label, description, and error handling for collecting user input.
  • Time Field: Time input field with labels, descriptions, and validation built on React Aria TimeField
  • Toast: Displays temporary notification messages that appear at the top or bottom of the screen.
  • Toggle Button: An interactive toggle control for on/off or selected/unselected states
  • Toggle Button Group: Groups multiple ToggleButtons into a unified control, allowing users to select one or multiple options.
  • Toolbar: A container for interactive controls with arrow key navigation.
  • Tooltip: Displays informative text when users hover over or focus on an element
  • Typography: Primitive typography component for rendering styled text with semantic type variants.

Browse by category