@hextaui

HextaUI design tokens: status colors, easing curves, hairline borders, type scale and the keyframes every component animates with.

Parse, label, announce and match keyboard shortcuts, with ⌘ on Apple platforms and Ctrl everywhere else.

The easing curves, durations and reduced-motion check every component animates with, plus hooks for size morphs and sliding highlights.

Grows a textarea with what you write between its minimum and maximum height, animating each change without ever touching the text.

Runs an async action through loading, success and error, skipping the spinner for fast requests and holding an error while you read it.

Keeps a ref to your own element while still forwarding it to whatever ref the parent passed in.

Shows a loading state only when work is actually slow, then keeps it up long enough that it never flickers.

The keys someone is holding down right now, shared by every subscriber through a single set of window listeners.

Shakes a form control when a submit attempt finds it invalid, and never while someone is still typing.

Combines any number of callback and object refs into one, with React 19 ref cleanup for each of them.

Turns a page and a page count into the list of pages and ellipses to render, keeping its length steady as the page moves.

Today's date that rolls over at midnight and when the tab comes back, without a hydration mismatch.

Stacked headings that each reveal a panel, with height motion you can reverse mid-way and panels that stay searchable while closed.

Inline messages for status and feedback, with a neutral surface, a colored icon and a dismiss that collapses smoothly.

A confirmation dialog for destructive or important actions that waits for async work, and becomes a bottom sheet on phones.

A box that holds its shape before media loads, shimmers while loading, fades the media in and falls back when it fails.

File and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their extension.

User photos with an initials fallback, status badges and stacked groups that collapse into a count.

Status labels with colored dots, removable tags that slide closed and counts that roll to their new value.

A trail of links to the current page that wraps safely, mirrors in right-to-left layouts and expands collapsed segments in place.

Chat message bubbles with variants, grouped corners, reactions and room for interactive content.

Buttons in every variant and size, with a built-in loading, success and error flow that skips the spinner for fast requests.

Buttons joined into one control, with shared seams, separators, text addons, nesting and vertical stacks.

A date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.

A surface for grouping content, with three variants, edge-to-edge media, concentric radii and whole-card links.

Native scroll-snap slides with momentum on touch, mouse dragging, arrow keys, dots, thumbnails and an autoplay that pauses when it should.

Recharts charts with themed colors, a tooltip and legend that read labels from one config, and keyboard navigation with a visible focus ring.

A checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.

A panel that shows and hides with height motion you can reverse mid-way, without jumping the layout.

A filterable select with chips, groups and async results, in a popup that resizes as you type.

A searchable list of actions, inline or as a ⌘K palette, with pages, shortcuts and highlighted matches.

A menu of actions on right click or long press, with submenus, checkbox and radio items, and hold feedback on touch.

A table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.

A button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.

A window over the page for forms and focused tasks, with a pinned header and footer, nesting, and a swipeable bottom sheet on phones.

A panel that slides in from any edge and follows your finger, with snap points, a working handle and nested drawers that stack.

A menu of actions and options behind a button, with groups, submenus, checkbox and radio items, and shortcuts.

A placeholder for screens with nothing to show yet, with an icon, a message and the next action.

Labels, descriptions and errors wired to their control, with validation states and layouts for forms.

A preview card that opens when a link is hovered or focused, for content sighted users can glance at.

A text input with three sizes, invalid and read-only states, native validation styling and a 16px touch font so phones never zoom in.

An input with icons, text, buttons or a keyboard hint attached, sharing one border and focus ring.

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.

A row of media, text and actions for lists, settings and pickers, with a grouped surface and a hover highlight that glides between rows.

Key caps for shortcuts that show the right symbols on every platform, read them out properly and press down with the real keys.

A label that follows its control, dimming when it's disabled and marking it required or optional on its own.

Quiet notes between content, like date dividers and system events, with sticky dates and times that read as Today or Yesterday.

A desktop-style bar of menus with one highlight that slides between open menus and instant switching as you sweep across.

A chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.

A chat scroll area that follows new messages, keeps your place while you read back, and counts what you missed on the jump button.

The browser's own select, styled to match Input, with a quiet placeholder, Field support and the OS picker on every device.

Site navigation with dropdowns, or one full-width panel that stays open while its content slides between menus.

Animated numbers where only the changed digits spin, with any Intl format and locale.

Page navigation that keeps every button in place, glides to the current page and jumps to any page from the ellipsis.

A floating panel anchored to a trigger that resizes smoothly with its content and follows the trigger’s direction.

A bar or ring that shows how far a task has come, eases between updates and slides while the total is unknown.

A step-by-step form that moves between questions with a sense of direction, shows real progress and answers from the keyboard.

Pick one option from a set, with a dot that hands off between choices and cards whose selection ring slides to the new pick.

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.

A pointer safe triangle that keeps submenus and flyouts open while the cursor travels diagonally toward them.

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.

Pick one or more options from a list that opens on the current value, with typeahead, groups and form support.

A hairline that divides content horizontally or vertically, with an optional label and a decorative mode for purely visual lines.

A panel that slides in from any edge, with swipe-to-dismiss, scroll lock and stacked nesting.

An app sidebar that collapses to icons or off canvas, stays pinned under your header, and becomes a swipeable sheet on phones.

Placeholders that wait 150ms before showing, take the exact size of the content they wrap, and fade it in without moving anything.

Pick a value or a range by dragging, tapping the track or using the keys, with jumps that glide and an optional value bubble.

A loading indicator with Apple-style ticks or a breathing ring that can wait before showing and stay long enough not to flicker.

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.

A responsive table with a surface style, wrapping or compact cells, sticky headers, pinned columns and scroll hints.

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.

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.

Brief messages that stack neatly, expand on hover, swipe away, and turn a loading state into success or error in place.

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.

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.

A short hint on hover or keyboard focus that opens after a brief rest, switches instantly between neighbours and shows shortcuts.

Nested, expandable rows for files and hierarchies, with indent guides, connector lines, cascading checkboxes, typeahead and full keyboard support.

A video player with a scrubbable seek bar, auto-hiding controls, keyboard shortcuts, speed, picture in picture and full screen.

Every HextaUI component, the theme, shared libs and hooks in one install.

The Controlled example from the Accordion docs.

The Custom icon example from the Accordion docs.

The main Accordion demo from the docs.

The Disabled example from the Accordion docs.

The Ghost example from the Accordion docs.

The Leading icons example from the Accordion docs.

The Long content example from the Accordion docs.

The Multiple example from the Accordion docs.

The Nested example from the Accordion docs.

The Outline example from the Accordion docs.

The Right to left example from the Accordion docs.

The Separated example from the Accordion docs.

The Actions example from the Alert docs.

The Cancel a dismiss example from the Alert docs.

The Controlled example from the Alert docs.

The main Alert demo from the docs.

The Dismissible example from the Alert docs.

The Inserted after load example from the Alert docs.

The Partial content example from the Alert docs.

The Rich content example from the Alert docs.

The Right to left example from the Alert docs.

The Soft example from the Alert docs.

The Variants example from the Alert docs.

The Async action example from the Alert dialog docs.

The Controlled example from the Alert dialog docs.

The main Alert dialog demo from the docs.

The Detached triggers example from the Alert dialog docs.

The Long content example from the Alert dialog docs.

The Media example from the Alert dialog docs.

The Nested example from the Alert dialog docs.

The Right to left example from the Alert dialog docs.

The Small example from the Alert dialog docs.

The Broken image example from the Aspect ratio docs.

The main Aspect ratio demo from the docs.

The As a figure example from the Aspect ratio docs.

The Inside a centered flex column example from the Aspect ratio docs.

The Invalid ratio example from the Aspect ratio docs.

The Overlay example from the Aspect ratio docs.

The Ratios example from the Aspect ratio docs.

The Responsive example from the Aspect ratio docs.

The Right to left example from the Aspect ratio docs.

The Slow load example from the Aspect ratio docs.

The Text content example from the Aspect ratio docs.

The Without placeholder example from the Aspect ratio docs.

The Broken image example from the Attachment docs.

The Composer example from the Attachment docs.

The main Attachment demo from the docs.

The Group example from the Attachment docs.

The Image example from the Attachment docs.

The Long names example from the Attachment docs.

The Right to left example from the Attachment docs.

The Sizes example from the Attachment docs.

The States example from the Attachment docs.

The Stress example from the Attachment docs.

The Trigger example from the Attachment docs.

The Upload flow example from the Attachment docs.

The main Avatar demo from the docs.

The Group example from the Avatar docs.

The Initials example from the Avatar docs.

The Layout example from the Avatar docs.

The Linked group example from the Avatar docs.

The Loading example from the Avatar docs.

The Right to left example from the Avatar docs.

The Sizes and shapes example from the Avatar docs.

The Status example from the Avatar docs.

The Controlled example from the Badge docs.

The Counts example from the Badge docs.

The main Badge demo from the docs.

The Interactive example from the Badge docs.

The Long content example from the Badge docs.

The Removable example from the Badge docs.

The Right to left example from the Badge docs.

The Sizes example from the Badge docs.

The Variants and appearances example from the Badge docs.

The Basic example from the Breadcrumb docs.

The Collapsed example from the Breadcrumb docs.

The Custom separator example from the Breadcrumb docs.

The main Breadcrumb demo from the docs.

The Dropdown example from the Breadcrumb docs.

The Ellipsis example from the Breadcrumb docs.

The Link component example from the Breadcrumb docs.

The Long content example from the Breadcrumb docs.

The Right to left example from the Breadcrumb docs.

The With icons example from the Breadcrumb docs.

The Alignment example from the Bubble docs.

The main Bubble demo from the docs.

The Group example from the Bubble docs.

The Long content example from the Bubble docs.

The Nested reply example from the Bubble docs.

The Popover example from the Bubble docs.

The Reactions example from the Bubble docs.

The Right to left example from the Bubble docs.

The Shapes example from the Bubble docs.

The Show more example from the Bubble docs.

The Tail example from the Bubble docs.

The Tooltip example from the Bubble docs.

The Variants example from the Bubble docs.

The Controlled loading example from the Button docs.

The Controlled status example from the Button docs.

The Custom labels example from the Button docs.

The main Button demo from the docs.

The Disabled example from the Button docs.

The Error details example from the Button docs.

The Forms example from the Button docs.

The Icon buttons example from the Button docs.

The As a link example from the Button docs.

The Pill example from the Button docs.

The Right to left example from the Button docs.

The Sizes example from the Button docs.

The Smooth width example from the Button docs.

The Feedback on every variant example from the Button docs.

The Variants example from the Button docs.

The With icon example from the Button docs.

The main Button group demo from the docs.

The Disabled and invalid example from the Button group docs.

The Feedback inside a group example from the Button group docs.

The As a fieldset example from the Button group docs.

The Full width example from the Button group docs.

The With text and an input example from the Button group docs.

The Nested groups example from the Button group docs.

The Separators example from the Button group docs.

The Right to left example from the Button group docs.

The Sizes example from the Button group docs.

The Split button example from the Button group docs.

The Vertical example from the Button group docs.

The Bounded example from the Calendar docs.

The Controlled month example from the Calendar docs.

The main Calendar demo from the docs.

The Month and year dropdowns example from the Calendar docs.

The Fixed today example from the Calendar docs.

The Multiple example from the Calendar docs.

The Range limits example from the Calendar docs.

The Range example from the Calendar docs.

The Right to left example from the Calendar docs.

The Inside a sheet example from the Calendar docs.

The Week numbers example from the Calendar docs.

The Borders example from the Card docs.

The main Card demo from the docs.

The Clickable variants example from the Card docs.

The Clickable card example from the Card docs.

The Long content example from the Card docs.

The Media example from the Card docs.

The Nested example from the Card docs.

The Right to left example from the Card docs.

The Semantics example from the Card docs.

The Sizes example from the Card docs.

The Variants example from the Card docs.

The API example from the Carousel docs.

The Autoplay example from the Carousel docs.

The Controlled example from the Carousel docs.

The main Carousel demo from the docs.

The Dots and counter example from the Carousel docs.

The Adding and removing slides example from the Carousel docs.

The Links and focusable content example from the Carousel docs.

The Long content and a single slide example from the Carousel docs.

The Nested example from the Carousel docs.

The Rewind and start index example from the Carousel docs.

The Right to left example from the Carousel docs.

The Several per view example from the Carousel docs.

The Thumbnails example from the Carousel docs.

The Vertical example from the Carousel docs.

The Bar chart example from the Chart docs.

The main Chart demo from the docs.

The Horizontal bars example from the Chart docs.

The Icons example from the Chart docs.

The Line chart example from the Chart docs.

The Long labels example from the Chart docs.

The Negative values example from the Chart docs.

The Donut example from the Chart docs.

The Radar example from the Chart docs.

The Right to left example from the Chart docs.