Dev Design Library

HextaUI components

beautiful components built on top of shadcn/ui

Components
66
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
60
Source
https://github.com/preetsuthar17/hextaui
Website
https://hextaui.com
Install
npx shadcn@latest add https://hextaui.com/r/{name}.json

All HextaUI components

  • Accordion: Stacked headings that each reveal a panel, with height motion you can reverse mid-way and panels that stay searchable while closed.
  • Alert: Inline messages for status and feedback, with a neutral surface, a colored icon and a dismiss that collapses smoothly.
  • Alert dialog: A confirmation dialog for destructive or important actions that waits for async work, and becomes a bottom sheet on phones.
  • Aspect ratio: A box that holds its shape before media loads, shimmers while loading, fades the media in and falls back when it fails.
  • Attachment: File and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their extension.
  • Avatar: User photos with an initials fallback, status badges and stacked groups that collapse into a count.
  • Badge: Status labels with colored dots, removable tags that slide closed and counts that roll to their new value.
  • Breadcrumb: A trail of links to the current page that wraps safely, mirrors in right-to-left layouts and expands collapsed segments in place.
  • Bubble: Chat message bubbles with variants, grouped corners, reactions and room for interactive content.
  • Button: Buttons in every variant and size, with a built-in loading, success and error flow that skips the spinner for fast requests.
  • Button group: Buttons joined into one control, with shared seams, separators, text addons, nesting and vertical stacks.
  • Calendar: A date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.
  • Card: A surface for grouping content, with three variants, edge-to-edge media, concentric radii and whole-card links.
  • Carousel: Native scroll-snap slides with momentum on touch, mouse dragging, arrow keys, dots, thumbnails and an autoplay that pauses when it should.
  • Chart: Recharts charts with themed colors, a tooltip and legend that read labels from one config, and keyboard navigation with a visible focus…
  • Checkbox: A checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.
  • Collapsible: A panel that shows and hides with height motion you can reverse mid-way, without jumping the layout.
  • Combobox: A filterable select with chips, groups and async results, in a popup that resizes as you type.
  • Command: A searchable list of actions, inline or as a ⌘K palette, with pages, shortcuts and highlighted matches.
  • Context menu: A menu of actions on right click or long press, with submenus, checkbox and radio items, and hold feedback on touch.
  • Data table: A table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.
  • Date picker: A button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.
  • Dialog: A window over the page for forms and focused tasks, with a pinned header and footer, nesting, and a swipeable bottom sheet on phones.
  • Drawer: A panel that slides in from any edge and follows your finger, with snap points, a working handle and nested drawers that stack.
  • Dropdown menu: A menu of actions and options behind a button, with groups, submenus, checkbox and radio items, and shortcuts.
  • Empty: A placeholder for screens with nothing to show yet, with an icon, a message and the next action.
  • Field: Labels, descriptions and errors wired to their control, with validation states and layouts for forms.
  • Hover card: A preview card that opens when a link is hovered or focused, for content sighted users can glance at.
  • Input: A text input with three sizes, invalid and read-only states, native validation styling and a 16px touch font so phones never zoom in.
  • Input group: An input with icons, text, buttons or a keyboard hint attached, sharing one border and focus ring.
  • Input OTP: One-time code slots that take typing, paste and SMS autofill, with an opt-in animation that cascades codes in and a status for verifying.
  • Item: A row of media, text and actions for lists, settings and pickers, with a grouped surface and a hover highlight that glides between rows.
  • Kbd: Key caps for shortcuts that show the right symbols on every platform, read them out properly and press down with the real keys.
  • Label: A label that follows its control, dimming when it's disabled and marking it required or optional on its own.
  • Marker: Quiet notes between content, like date dividers and system events, with sticky dates and times that read as Today or Yesterday.
  • Menubar: A desktop-style bar of menus with one highlight that slides between open menus and instant switching as you sweep across.
  • Message: A chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
  • Message scroller: A chat scroll area that follows new messages, keeps your place while you read back, and counts what you missed on the jump button.
  • Native select: The browser's own select, styled to match Input, with a quiet placeholder, Field support and the OS picker on every device.
  • Navigation menu: Site navigation with dropdowns, or one full-width panel that stays open while its content slides between menus.
  • Number flow: Animated numbers where only the changed digits spin, with any Intl format and locale.
  • Pagination: Page navigation that keeps every button in place, glides to the current page and jumps to any page from the ellipsis.
  • Popover: A floating panel anchored to a trigger that resizes smoothly with its content and follows the trigger’s direction.
  • Progress: A bar or ring that shows how far a task has come, eases between updates and slides while the total is unknown.
  • Questionnaire: A step-by-step form that moves between questions with a sense of direction, shows real progress and answers from the keyboard.
  • Radio group: Pick one option from a set, with a dot that hands off between choices and cards whose selection ring slides to the new pick.
  • Resizable: Panels you can drag apart, with a quiet divider that wakes up on hover, sizes that glide on reset or collapse, and layouts that persist.
  • Safe area: A pointer safe triangle that keeps submenus and flyouts open while the cursor travels diagonally toward them.
  • Scroll area: Native scrolling with a minimal scrollbar, edges that fade only where there’s more to see, and an optional peek that cuts the last item in…
  • Select: Pick one or more options from a list that opens on the current value, with typeahead, groups and form support.
  • Separator: A hairline that divides content horizontally or vertically, with an optional label and a decorative mode for purely visual lines.
  • Sheet: A panel that slides in from any edge, with swipe-to-dismiss, scroll lock and stacked nesting.
  • Sidebar: An app sidebar that collapses to icons or off canvas, stays pinned under your header, and becomes a swipeable sheet on phones.
  • Skeleton: Placeholders that wait 150ms before showing, take the exact size of the content they wrap, and fade it in without moving anything.
  • Slider: Pick a value or a range by dragging, tapping the track or using the keys, with jumps that glide and an optional value bubble.
  • Spinner: A loading indicator with Apple-style ticks or a breathing ring that can wait before showing and stay long enough not to flicker.
  • Switch: An on/off toggle you can tap, press or drag, with a thumb that stretches under your finger and an optional pending state for saves.
  • Table: A responsive table with a surface style, wrapping or compact cells, sticky headers, pinned columns and scroll hints.
  • Tabs: Switch between views with an indicator that slides to the active tab, as a segmented control or an underline, and lists that scroll when…
  • Textarea: Multi-line text that grows smoothly with what you write between a minimum and maximum number of rows, with counters, validation and a…
  • Toast: Brief messages that stack neatly, expand on hover, swipe away, and turn a loading state into success or error in place.
  • Toggle: A button that stays on or off, with a fill that settles in when pressed, a clear hover-to-on step and icons that can fill with the state.
  • Toggle group: A row of toggles for one choice or many, with a fill that slides to the picked item, joined or spaced items and arrow-key focus.
  • Tooltip: A short hint on hover or keyboard focus that opens after a brief rest, switches instantly between neighbours and shows shortcuts.
  • Tree: Nested, expandable rows for files and hierarchies, with indent guides, connector lines, cascading checkboxes, typeahead and full keyboard…
  • Video player: A video player with a scrubbable seek bar, auto-hiding controls, keyboard shortcuts, speed, picture in picture and full screen.

Browse by category