# React UI components for shadcn/ui

> 65 free, open-source React components for shadcn/ui on Base UI and Tailwind CSS, from inputs and dialogs to data tables, date pickers and chat. Live previews of each.

Canonical: https://hextaui.com/components
Last updated: 2026-10-29

## Browse by category

- [Form components](https://hextaui.com/components/forms) - Free React form components for shadcn/ui on Base UI: inputs, selects, comboboxes, date pickers, OTP fields and validation that shakes, counts and explains.
- [Overlay components](https://hextaui.com/components/overlays) - Free React dialogs, sheets, drawers, popovers, menus, tooltips and a command palette for shadcn/ui, with focus handled and motion you can interrupt.
- [Data display components](https://hextaui.com/components/data-display) - Free React tables, data tables, charts, trees, cards, badges, avatars and animated numbers for shadcn/ui, built on Base UI and Tailwind CSS.
- [Layout components](https://hextaui.com/components/layout) - Free React accordions, collapsibles, carousels, resizable panels, scroll areas and aspect ratio boxes for shadcn/ui, with height motion you can reverse.
- [Feedback components](https://hextaui.com/components/feedback) - Free React toasts, alerts, progress bars, spinners, skeletons and empty states for shadcn/ui, with loading that waits before it shows and announces changes.
- [Chat UI components](https://hextaui.com/components/chat) - Free React chat UI components for shadcn/ui: messages, bubbles, a message scroller that follows streaming replies, attachments and date markers.
- [Navigation components](https://hextaui.com/components/navigation) - Free React sidebars, tabs, breadcrumbs, pagination and navigation menus for shadcn/ui on Base UI, with keyboard support and right-to-left layouts.
- [Button and action components](https://hextaui.com/components/actions) - Free React buttons, button groups, toggles and toggle groups for shadcn/ui, with loading, success and error states built into the button.

## Components

- [Accordion](https://hextaui.com/docs/accordion) - Stacked headings that each reveal a panel, with height motion you can reverse mid-way and panels that stay searchable while closed.
- [Alert](https://hextaui.com/docs/alert) - Inline messages for status and feedback, with a neutral surface, a colored icon and a dismiss that collapses smoothly.
- [Alert dialog](https://hextaui.com/docs/alert-dialog) - A confirmation dialog for destructive or important actions that waits for async work, and becomes a bottom sheet on phones.
- [Aspect ratio](https://hextaui.com/docs/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](https://hextaui.com/docs/attachment) - File and image cards for uploads, with progress, states, actions, a full-card trigger and names that keep their extension.
- [Avatar](https://hextaui.com/docs/avatar) - User photos with an initials fallback, status badges and stacked groups that collapse into a count.
- [Badge](https://hextaui.com/docs/badge) - Status labels with colored dots, removable tags that slide closed and counts that roll to their new value.
- [Breadcrumb](https://hextaui.com/docs/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](https://hextaui.com/docs/bubble) - Chat message bubbles with variants, grouped corners, reactions and room for interactive content.
- [Button](https://hextaui.com/docs/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](https://hextaui.com/docs/button-group) - Buttons joined into one control, with shared seams, separators, text addons, nesting and vertical stacks.
- [Calendar](https://hextaui.com/docs/calendar) - A date grid for single, range and multiple selection, with sliding months, range previews and touch-sized days.
- [Card](https://hextaui.com/docs/card) - A surface for grouping content, with three variants, edge-to-edge media, concentric radii and whole-card links.
- [Carousel](https://hextaui.com/docs/carousel) - Native scroll-snap slides with momentum on touch, mouse dragging, arrow keys, dots, thumbnails and an autoplay that pauses when it should.
- [Chart](https://hextaui.com/docs/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](https://hextaui.com/docs/checkbox) - A checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.
- [Collapsible](https://hextaui.com/docs/collapsible) - A panel that shows and hides with height motion you can reverse mid-way, without jumping the layout.
- [Combobox](https://hextaui.com/docs/combobox) - A filterable select with chips, groups and async results, in a popup that resizes as you type.
- [Command](https://hextaui.com/docs/command) - A searchable list of actions, inline or as a ⌘K palette, with pages, shortcuts and highlighted matches.
- [Context menu](https://hextaui.com/docs/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](https://hextaui.com/docs/data-table) - A table for real data, with sorting, search, row selection, pinned columns, a sticky header and pagination.
- [Date picker](https://hextaui.com/docs/date-picker) - A button that opens a calendar in a popover, or a bottom sheet on phones, for single dates and ranges.
- [Dialog](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/dropdown-menu) - A menu of actions and options behind a button, with groups, submenus, checkbox and radio items, and shortcuts.
- [Empty](https://hextaui.com/docs/empty) - A placeholder for screens with nothing to show yet, with an icon, a message and the next action.
- [Field](https://hextaui.com/docs/field) - Labels, descriptions and errors wired to their control, with validation states and layouts for forms.
- [Hover card](https://hextaui.com/docs/hover-card) - A preview card that opens when a link is hovered or focused, for content sighted users can glance at.
- [Input](https://hextaui.com/docs/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](https://hextaui.com/docs/input-group) - An input with icons, text, buttons or a keyboard hint attached, sharing one border and focus ring.
- [Input OTP](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/label) - A label that follows its control, dimming when it's disabled and marking it required or optional on its own.
- [Marker](https://hextaui.com/docs/marker) - Quiet notes between content, like date dividers and system events, with sticky dates and times that read as Today or Yesterday.
- [Menubar](https://hextaui.com/docs/menubar) - A desktop-style bar of menus with one highlight that slides between open menus and instant switching as you sweep across.
- [Message](https://hextaui.com/docs/message) - A chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
- [Message scroller](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/navigation-menu) - Site navigation with dropdowns, or one full-width panel that stays open while its content slides between menus.
- [Number flow](https://hextaui.com/docs/number-flow) - Animated numbers where only the changed digits spin, with any Intl format and locale.
- [Pagination](https://hextaui.com/docs/pagination) - Page navigation that keeps every button in place, glides to the current page and jumps to any page from the ellipsis.
- [Popover](https://hextaui.com/docs/popover) - A floating panel anchored to a trigger that resizes smoothly with its content and follows the trigger’s direction.
- [Progress](https://hextaui.com/docs/progress) - A bar or ring that shows how far a task has come, eases between updates and slides while the total is unknown.
- [Questionnaire](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/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.
- [Scroll area](https://hextaui.com/docs/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](https://hextaui.com/docs/select) - Pick one or more options from a list that opens on the current value, with typeahead, groups and form support.
- [Separator](https://hextaui.com/docs/separator) - A hairline that divides content horizontally or vertically, with an optional label and a decorative mode for purely visual lines.
- [Sheet](https://hextaui.com/docs/sheet) - A panel that slides in from any edge, with swipe-to-dismiss, scroll lock and stacked nesting.
- [Sidebar](https://hextaui.com/docs/sidebar) - An app sidebar that collapses to icons or off canvas, stays pinned under your header, and becomes a swipeable sheet on phones.
- [Skeleton](https://hextaui.com/docs/skeleton) - Placeholders that wait 150ms before showing, take the exact size of the content they wrap, and fade it in without moving anything.
- [Slider](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/table) - A responsive table with a surface style, wrapping or compact cells, sticky headers, pinned columns and scroll hints.
- [Tabs](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/toast) - Brief messages that stack neatly, expand on hover, swipe away, and turn a loading state into success or error in place.
- [Toggle](https://hextaui.com/docs/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](https://hextaui.com/docs/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](https://hextaui.com/docs/tooltip) - A short hint on hover or keyboard focus that opens after a brief rest, switches instantly between neighbours and shows shortcuts.
- [Tree](https://hextaui.com/docs/tree) - Nested, expandable rows for files and hierarchies, with indent guides, connector lines, cascading checkboxes, typeahead and full keyboard support.
- [Video player](https://hextaui.com/docs/video-player) - A video player with a scrubbable seek bar, auto-hiding controls, keyboard shortcuts, speed, picture in picture and full screen.