H
HextaUI
/
ui
Files
Code
Info
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
alert-dialog
A confirmation dialog for destructive or important actions that waits for async work, and becomes a bottom sheet on phones.
Aspect ratio
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
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 ring.
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
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
data-table
A table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.
Date picker
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
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
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
input-group
An input with icons, text, buttons or a keyboard hint attached, sharing one border and focus ring.
Input OTP
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
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
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
navigation-menu
Site navigation with dropdowns, or one full-width panel that stays open while its content slides between menus.
Number flow
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
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
safe-area
A pointer safe triangle that keeps submenus and flyouts open while the cursor travels diagonally toward them.
Scroll area
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 half.
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 they overflow.
Textarea
Multi-line text that grows smoothly with what you write between a minimum and maximum number of rows, with counters, validation and a submit shortcut.
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
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 support.
Video player
video-player
A video player with a scrubbable seek bar, auto-hiding controls, keyboard shortcuts, speed, picture in picture and full screen.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
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
alert-dialog
A confirmation dialog for destructive or important actions that waits for async work, and becomes a bottom sheet on phones.
Aspect ratio
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
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 ring.
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
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
data-table
A table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.
Date picker
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
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
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
input-group
An input with icons, text, buttons or a keyboard hint attached, sharing one border and focus ring.
Input OTP
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
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
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
navigation-menu
Site navigation with dropdowns, or one full-width panel that stays open while its content slides between menus.
Number flow
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
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
safe-area
A pointer safe triangle that keeps submenus and flyouts open while the cursor travels diagonally toward them.
Scroll area
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 half.
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 they overflow.
Textarea
Multi-line text that grows smoothly with what you write between a minimum and maximum number of rows, with counters, validation and a submit shortcut.
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
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 support.
Video player
video-player
A video player with a scrubbable seek bar, auto-hiding controls, keyboard shortcuts, speed, picture in picture and full screen.
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information