Components
99 accessible components and 21 ready-made blocks, each with live examples, the props, keyboard and screen reader behaviour, and source you own.
Buttons
- ButtonTriggers an action or event, such as submitting a form or opening a dialog.5 examples
- Action ButtonOne button that handles the permission check, an optional confirmation, the pending state and a result message for an action. It does not fetch data, show toasts, cache or route: you pass the function that does the work.5 examples
- Shimmer ButtonA button with a soft band of light that crosses its surface now and then, for one standout action. Builds on Button, so focus, disabled and loading work the same.3 examples
- Ripple ButtonA button that sends a ripple out from where you pressed it, or from its centre when pressed with the keyboard. Builds on Button.2 examples
- Pulse ButtonA button with a soft ring that keeps radiating out, to draw the eye to the one action that matters now. Builds on Button.2 examples
- Gradient ButtonA button with a colour that travels around its edge. The label sits on the normal button surface, so its contrast is the plain Button's. Builds on Button.2 examples
- Reveal ButtonA button that opens an arrow beside its label when you hover or focus it, to suggest "go". Only a transition, so there is nothing to pause. Builds on Button.2 examples
- Button GroupJoins related Buttons into one visual unit with shared borders and rounded outer corners only, horizontal or vertical. Also the base for a split button and an icon toolbar.3 examples
Search and commands
- Command PaletteA search box in a dialog that finds and runs commands, jumps to pages and triggers actions from the keyboard. Opens with Ctrl or Cmd + K. Use CommandGroup and CommandItem for the results.3 examples
- ComboboxText input that filters a list of options as you type. Supports multi-select tags, async loading and long, virtualized lists.5 examples
Text and number inputs
- Text FieldSingle-line or multi-line text input with a label, help text and error message.5 examples
- Input GroupOne bordered text field that wraps an input with addons before or after it: a currency sign, a URL prefix, a search icon, a clear, show or copy button. Built from InputGroup, InputGroupAddon and InputGroupInput.5 examples
- Input OTPOne-time code input for verification and two-factor sign in. One real input holds the code and drawn cells show it, so paste, autofill from SMS and screen readers all work.4 examples
- Number FieldA text field for numbers, with increment and decrement buttons, keyboard stepping, and locale-aware formatting for decimals, currency, units and percentages.3 examples
- Tag InputA text field that turns what you type into removable tags when you press Enter or comma: for keywords, recipients and labels.3 examples
- File UploadA drop zone and button for choosing files, with type, size and count limits and a list of the chosen files you can remove from. The component picks the files; you upload them.3 examples
Choices and toggles
- SelectPicks one option from a list shown in a popover. Use with SelectItem children.4 examples
- CheckboxLets the user turn a single option on or off, with an optional indeterminate state.4 examples
- Radio GroupLets the user pick exactly one option from a small, visible set. Use with Radio children.4 examples
- SwitchTurns a setting on or off, taking effect immediately.3 examples
- SliderPicks a number, or a range with two thumbs, by dragging along a track. Shows the formatted value.4 examples
- Segmented ControlA row of connected buttons where exactly one option is chosen, for switching a view or a setting with two to five choices. Use SegmentedControlItem for each option.3 examples
- Toggle ButtonA button that stays pressed until pressed again, for turning a mode on or off, like Bold or Mute. Group several with ToggleButtonGroup for single or multiple choice.4 examples
- Toggle GroupA row or column of joined toggle buttons with shared borders, for formatting options or a choice between a few modes. Pick single or multiple selection.4 examples
- Color PickerPicks a color. A button shows the current color and opens a panel with a saturation and brightness area, a hue slider, an optional opacity slider, a hex field and preset swatches. ColorPickerPanel is the same panel inline. Values are hex strings.5 examples
- RatingA star rating. As an input it is a radio group of stars; with isReadOnly it is a display like "4.5 out of 5 stars" with an optional count.5 examples
- Native SelectThe browser's own select menu, dressed like the other fields. It gives the native picker on phones and works with plain form posts. For custom option rows or search, use Select or Combobox.4 examples
Forms
- FormA form that holds the values, runs your validators or a schema, and exposes its progress as an action state (idle, pending, success, error). Fields connect by name and the inputs already link label, help text and error. It never fetches or saves anything: your onSubmit does.4 examples
- Error SummaryThe list of problems at the top of a Form after a failed submit. Focus moves to it and each item takes the person to its field. It shows nothing until a submit has failed and goes away when everything is fixed.1 example
- Field ArrayRepeating rows of fields inside a Form, such as invoice lines or team members. Add, remove, move up or down and insert are all buttons, so the keyboard does everything; focus lands somewhere sensible and a polite message says what changed. The contents of the rows and any totals are yours.1 example
Dates and times
- CalendarMonth grid for picking a date. RangeCalendar picks a start and end. Used inside DatePicker and DateRangePicker.7 examples
- Date PickerDate field with a calendar popover. Typing and picking both work, in the user's locale.4 examples
- Date Range PickerStart and end date fields with a two-month calendar and optional presets like 'Last 7 days'.4 examples
- Time FieldA field for a time of day, with separate hour, minute and (optional) second segments that follow the visitor's locale and 12 or 24 hour clock.3 examples
Tables and data
- Data GridA fast, accessible data grid for thousands of rows: sorting, filtering, grouping, editing, copy and paste, export and server-side data. Columns are TanStack Table column definitions.16 examples
- TableA simple, accessible table for a small number of rows: optional sorting and row selection. Build it from TableHeader, TableColumn, TableBody, TableRow and TableCell. For thousands of rows, filtering, editing or grouping, use DataGrid.3 examples
- TreeAn expandable hierarchy such as folders and files or a nested menu, with keyboard navigation and optional selection. Build it from nested TreeItem elements.3 examples
- PaginationPage numbers with previous and next buttons, for content split across pages. Long ranges collapse to the first page, the last page, and the pages around the current one.3 examples
Charts and stats
- ChartA bar, line, area or donut chart drawn in plain SVG without a chart library. It fits its container, can be explored with a pointer or the arrow keys, and always comes with a written summary and a View as table switch that shows the same numbers.8 examples
- SparklineA tiny line or bar graphic that shows the shape of a trend, without axes. Decoration unless it has a label.8 examples
- StatA key number with its label and context: a value, an optional change over time and an optional small trend graphic. Unframed: place it in a Card or a grid.7 examples
Navigation
- TabsSwitches between related panels of content in the same place. Use with TabList, Tab and TabPanel.4 examples
- BreadcrumbsThe path from the top of the site to the current page, as links. Use BreadcrumbItem for each step; the last one is the current page.6 examples
- StepsShows where someone is in a multi-step process, such as checkout or setup: done, current and upcoming steps. It displays progress; you control the steps and buttons.3 examples
- MenuA list of actions or options that opens from a button, like a More (…) or Account menu. Use with MenuTrigger and MenuItem.4 examples
- Navigation MenuSite navigation along the top of a page: plain links, and triggers that open a shared panel of grouped links (a mega-menu). Built from NavigationMenuItem, NavigationMenuTrigger, NavigationMenuContent and NavigationMenuLink. It is a set of links, not a menu of actions.3 examples
- MenubarA horizontal bar of menus like File, Edit and View, as in a desktop application. Each MenubarMenu opens a list of actions with shortcuts, checkbox and radio items and submenus. Arrow keys move between the menus.3 examples
Dialogs and popovers
- DialogModal window that asks for focus, such as a confirmation or a short form. Open it with DialogTrigger.3 examples
- Alert DialogConfirmation dialog for destructive or irreversible actions. It cannot be dismissed by clicking outside, and can ask the user to type a word before the confirm button works. Open it with DialogTrigger.4 examples
- SheetA modal panel that slides in from the edge of the screen, for filters, details or navigation on small screens. Open it with DialogTrigger.3 examples
- DrawerA modal panel that slides up from the bottom of the screen and can be dragged down to dismiss, for short tasks on phones. Open it with DialogTrigger.3 examples
- PopoverNon-modal panel anchored to a trigger, for extra controls or details. Open it with DialogTrigger.3 examples
- TooltipShort text label shown on hover or keyboard focus. Wrap the trigger and tooltip in TooltipTrigger.2 examples
- Hover CardA richer preview that opens when a link is hovered or reached with the keyboard, like a profile summary on a user name. It only repeats information that is available elsewhere.3 examples
- Context MenuThe menu that opens at the pointer on a right click, a long press or the keyboard (Shift+F10 or the Menu key) over an area such as a file row. It never replaces a visible way to do the same thing.4 examples
Feedback and status
- AlertAn inline message about the state of the page or a task: a tip, a success, a warning or an error. For brief confirmations that disappear, use Toast.3 examples
- ToastBrief, non-blocking message about the result of an action. Render ToastRegion once and call toast().3 examples
- ProgressA bar showing how far along a task is, or that something is working when the amount is unknown.3 examples
- SkeletonA grey placeholder shaped like the content that is loading, so the page doesn't jump when it arrives.3 examples
- Empty StateWhat to show when a list, table or page has nothing in it yet: a short explanation and the next step.3 examples
- Error StateWhat to show when a page or a panel could not be shown: a failed load, or a 404, 403 or 500 screen, with what happened and how to go on.3 examples
- BadgeA small label that states a status or category, like Paid, Overdue or Beta. Not interactive.3 examples
- SpinnerA small loading indicator for work of unknown length: inline with text, inside a button, or over a whole area.4 examples
Content and layout
- CardA container that groups related content under an optional heading. Compose it with media, an overlay, header, meta, actions, body, a footer and a coloured band for destination, profile, listing and detail-panel cards.10 examples
- AccordionA stack of sections whose content expands and collapses under a heading, like an FAQ. Use with AccordionItem.3 examples
- AvatarA person's or account's picture, falling back to their initials when there is no image or it fails to load.3 examples
- KbdShows a keyboard key or shortcut, like Ctrl or ⌘K, in a keycap style. Not interactive.3 examples
- CollapsibleOne region that opens and closes under a trigger, for detail most people do not need at first. For a stack of related sections, use Accordion.3 examples
- Scroll AreaA scrollable region with a thin themed scrollbar, reachable by keyboard, with optional fades at the edges that still have content.3 examples
- SeparatorA thin line that divides content, horizontal or vertical, with an optional label in the middle such as "or".3 examples
- Avatar GroupAn overlapping stack of avatars with a +N chip for the rest, for showing who is on a team, thread or file.3 examples
- CarouselA row (or column) of slides that scrolls and snaps, with previous and next buttons and slide dots, for a small set of related items such as featured cards or screenshots. Use CarouselItem for each slide. Built on native scroll snapping, so touch and trackpad swiping work without extra code.5 examples
- Resizable PanelsPanels side by side or stacked that the person can resize by dragging or with the keyboard, for a sidebar and content, an editor and a console, or a split view. Build it from ResizablePanelGroup, ResizablePanel (id, defaultSize, minSize, maxSize, collapsible, collapsedSize) and ResizableHandle (withHandle, label).5 examples
- Aspect RatioA box that keeps a fixed width to height ratio for what it holds, such as an image, a video or a map. It reserves the space before the content loads, so the page does not jump.3 examples
- DirectionSets the reading direction for everything inside it. It writes the dir attribute and gives React Aria the matching locale, so arrow keys and logical CSS flip together.3 examples
- ItemA flexible list row with a leading media slot (icon box, avatar or picture), a title, a description and trailing actions. The whole row can be a link or a button while its actions stay separately clickable.5 examples
- TypographyText components that use the font of the host app: Heading (H1 to H4) with the visual size separate from the semantic level, Text, Lead, Prose for raw HTML, InlineCode, Blockquote and List.4 examples
AI chat and agents
- ChatA whole conversation with an assistant: the messages, a box to write in, and the stop and jump-to-latest controls. It shows what you give it and reports what the person does; it never calls a model.4 examples
- MessageOne message in a conversation, from you or the assistant. It renders each part in order with the right component: text as formatted markdown, tool calls as activity, tables and charts as real components, sources at the end.4 examples
- Prompt InputThe message box of a chat: one rounded bar with a + menu on the left, the text in the middle, and your own controls, a microphone and Send on the right. Added files show above the text. You get only the buttons you ask for.4 examples
- ResponseShows an assistant's reply as formatted text: headings, lists, tables, code, links and source markers. It is safe for text you do not control and for text that is still arriving.3 examples
- Tool CallOne thing the assistant did, such as searching or running a query: its name, where it is (waiting, running, needs approval, done, failed), how long it took, and on request what went in and out.3 examples
- Agent ActivityA short summary of what the assistant is doing or did, such as "Used 3 tools", that opens into each step. It stays open while a step needs approval.3 examples
- Approval BoxAsks someone to approve or decline something the assistant wants to do. It says what will happen, how risky it is and whether it can be undone, in words as well as color.2 examples
- CitationA small numbered marker, like [1], inside a reply that jumps to the source it refers to.1 example
- SourcesThe numbered list of sources a reply drew on, with title, site and a short excerpt. Each entry is where a Citation marker lands.1 example
- Generated TableA table an assistant produced, shown as a real sortable table with a title and summary, numbers aligned, long results cut to a few rows, and a CSV download.2 examples
- Generated ChartA bar or line chart an assistant produced, drawn without a chart library, always with a written summary and a View as table switch that shows the same numbers as a table.3 examples
- AttachmentA chip or card for a file attached to a message or a prompt: its name, size, a type icon, an upload progress bar or error, and an optional remove button. A preview variant shows a thumbnail for pictures. AttachmentList groups several as a list.3 examples
- BubbleA chat bubble for plain, short messages. Bubble is the chrome around one message: alignment and colour for who sent it, an avatar, a name and a time, a delivery status with Retry, grouped bubbles that merge their corners, and a footer for actions. It does not render structured replies. Message renders an AI turn from typed parts (markdown, tools, charts, sources) and Chat holds the whole conversation; use Bubble for person-to-person or simple text chats, or put a Response inside a Bubble when you want the bubble look around formatted text.4 examples
- MarkerA divider that labels a moment inside a conversation or feed: a centered label between two lines. Use date for a new day, unread for where new messages start, and event for something that happened, like someone joining.3 examples
- Message ScrollerThe scrolling region of a conversation. It follows new messages while the reader is at the bottom, stays put when the reader has scrolled up (with a Jump to latest button), and keeps the place when older messages are added at the top.3 examples
- QuestionnaireA short flow of questions asked one at a time, for onboarding or for an assistant that needs a few details. It shows progress, keeps answers when going back, and ends with a review step where each answer can be edited.3 examples
Motion and effects
- Text ShimmerText with a band of light sweeping across it, for a loading message or a quiet accent. The words stay real text: selectable and read as normal.2 examples
- Gradient TextText filled with a gradient that keeps flowing, for a short headline or a highlighted word. The words stay real text.2 examples
- Blur FadeContent that sharpens and slides into place when it first appears or when it scrolls into view. It is visible to start with, so it never hides content from anyone.2 examples
- Shine BorderA band of colour that slides steadily along a border, so the edge seems to catch the light. Wrap a card or a field.2 examples
- Shuttle BorderA point of light that runs around the edge of whatever is inside, like the shuttle of a loom crossing the threads. Wrap a card, an input or a button; give it your radius and background.2 examples
- RippleConcentric rings that swell outward from the centre, as a calm backdrop behind a heading or a call to action. Content goes in front of the rings.2 examples
Blocks
- Dashboard ShellThe frame of a dashboard or admin app: a sidebar of navigation that folds down to icons, a top bar with search and actions, an account menu, and the page. On a phone, or in any narrow space, the sidebar becomes a menu that slides in.6 examples
- Dashboard PageOne page of a dashboard: a title with its actions, a row of key numbers, then your content. It sits inside DashboardShell but works anywhere. The title is the page's h1.3 examples
- Page HeaderThe top of a page: breadcrumbs, a title with badges, a description, actions on the right and tabs underneath. Every part is optional except the title.3 examples
- Section HeaderThe heading of a section inside a page, for a card or a table: a title, a description and actions on the right.2 examples
- App FooterThe footer of an application or marketing page: a line of text, link lists and social links. It stacks on a phone and has the same size and spacing on every page.3 examples
- Auth CardThe centered card for sign in, sign up, forgot password and verify code screens: a logo, a title, your form, other ways to sign in and links underneath.9 examples
- SidebarA sidebar of navigation: the team or product name at the top, grouped links with sub-items and badges, an optional footer, and the signed-in person at the bottom. It can fold down to icons, and comes in four looks. It is only the panel; DashboardShell adds the top bar and the phone menu.12 examples
- Customer TableA ready-to-use customer list: search, filters, sorting, pages, CSV export, loading rows, an empty state, an error with retry, cards on a phone, and totals with a chart above that follow the filters. Give it customers and it works.9 examples
- Data TableThe list screen every admin, ERP and SaaS app has: a table of rows with search, filters, sorting, pages, selection with bulk actions, a row menu with confirmed actions, CSV export, loading, empty and error states, and cards on a narrow screen. It never fetches: you pass the rows (or one page of them with serverSide) and handle the actions. Permissions only change what people see and can try; they are not security, so the server must check every action again.10 examples
- Invite DialogA dialog for inviting people, in three shapes: typed emails with a role on one compact line each, a search of a directory you pass, or a two-step pick-from-a-list with a role per person. Checks for format, duplicates and people who are already members, an error summary, an optional message and a submit button that says how many invitations it sends. Your onInvite does the work. UI permission is not security: the server must check again.7 examples
- User FormA form to create or edit a user, in three presentations: a whole page (variant page), a compact form for a Dialog (modal) and a single-column form for a Sheet (sheet). Fields: profile picture, name, job title, email, phone with a calling-code select, address, time zone, language, bio, role, active switch and team, chosen with a plain fields object. Edit mode adds a danger zone to suspend or reinstate and delete, each behind a confirmation. Save stays disabled until something changes, and Cancel asks before throwing changes away. Your onSubmit does the work. UI permission is not security: the server must check again.7 examples
- Settings SectionThe repeating unit of a settings page: a title and description on the left, a card with the content on the right, and a Save and Cancel bar that appears only when something has changed. Use SettingsRow inside for toggle lists. Your onSave does the work. UI permission is not security: the server must check again.9 examples
- Plan CardThe current subscription plan: name, price and interval, status with the right text, renewal or end date, feature list, a usage hint, and the actions Change plan and Cancel subscription (confirmed, with the end date). A past due plan shows an alert. PlanPicker, exported beside it, lets people choose another plan. Your callbacks do the work. UI permission is not security: the server must check again.7 examples
- Usage MeterA labeled meter for a limit: seats 8 of 10, storage 4.2 of 5 GB, API calls. It warns at 80 percent and at the limit with words and an icon, not only color, and can offer an upgrade when near the limit. UsageMeterList shows several. Built on role="meter"; the app owns the numbers. UI permission is not security: the server must check again.6 examples
- Event CalendarA month grid that shows events on the days they happen. People move between months, step through days with the arrow keys, pick an event, and add one from a day when the app allows it. The app owns the events and the month. Days with more events than fit show a +N more button that opens the full list for that day. UI permission is not security: the server must check again.4 examples
- Time Slot PickerPick a day, then a time on that day. A calendar chooses the date; the times for it come from your getSlots function, sync or async, and show as a group of radio buttons. Times that are taken are disabled and say why. A Confirm button hands back the date and the slot. The app owns which times exist. UI permission is not security: the server must check again before it books anything.3 examples
- Payment Method CardOne payment method: a generic card mark, the last four digits, the expiry with an expires soon notice, a default badge, and the actions Update, Remove (confirmed) and Make default. With no method it offers Add a payment method. It never holds a full card number; your callbacks do the work. UI permission is not security: the server must check again.5 examples
- Api Key ListA list of API keys with their name, prefix, creation and last use, and scopes as badges. Create key opens a dialog with a name and scopes, then shows the secret once with a Copy button and a warning; it is never shown again. Revoke needs the key name typed to confirm. Your callbacks do the work. UI permission is not security: the server must check again.4 examples
- User MenuThe avatar button that opens the account menu: the person's name and email at the top, your own entries (settings, billing, help) in groups, a row for the theme, and a Sign out entry that can ask first, shows that it is working, and tells screen readers how it went.4 examples
- App HeaderThe top bar of an application: a slot for a sidebar toggle, the breadcrumbs, a search button that opens your command palette, your own actions, a notifications bell with an unread count and the account menu. In a narrow space the search folds to an icon.6 examples
- Top NavNavigation across the top of an application or marketing site: your brand, links (some opening a short list), and a slot for buttons or the account menu. In a narrow space it becomes a menu button that opens the same links in a sheet. It comes plain, with a line, or as a floating pill.6 examples