Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Trigger an action with a text label, an icon, or both. Leading, trailing and icon-only buttons — usage example.
Show how one or several measures change over time or across ordered categories. Search terms: trend, time series, graph, analytics.
Display resources with status indicators, metadata and optional interactive rows. Linked projects with the current item — usage example.
Trigger an action with a text label, an icon, or both. Links in a sentence and on their own — usage example.
React Aria single-selection list with check or row-fill appearance, keyboard navigation and rich options.
Constrain overflowing content with styled scrollbars. List with faded edges — usage example.
Choose one item from a visible list. List with row selection — usage example.
Show a line in a conversation that is not a message, such as a status, a note or a date. Live status while the assistant thinks — usage example.
Trigger an action with a text label, an icon, or both. Loading button — usage example.
Indicate that an operation is still in progress. Loading spinner — usage example.
The locale and the kit's own texts: React Aria's locale boundary and the messages every component reads.
Compose a sidebar, header, and scrolling application content. Logo above the workspace — usage example.
Build application navigation with desktop collapse and a mobile sheet. Logo above the workspace — usage example.
Compose a sidebar, header, and scrolling application content. Logo only — usage example.
Build application navigation with desktop collapse and a mobile sheet. Logo only — usage example.
Choose a date from a button-triggered calendar. Long date format — usage example.
Present an inline message with a title and optional actions. Maintenance notice with icon — usage example.
Show a line in a conversation that is not a message, such as a status, a note or a date. Search terms: status line, system message, date separator, divider, thinking, typing indicator.
Display inline code, or a block of code with a copy action, highlighting and line numbers. Masked API key — usage example.
Show a file or an image attached to a message or a draft, with its upload state. Medium and small cards with a long name — usage example.
Edit a local date and time in one control. Meeting start in 15-minute steps — usage example.
Edit an hour and minute with segments or a selector. Meeting start in 15-minute steps — usage example.
Edit a date with keyboard segments or a calendar. Meeting start with a time — usage example.
Reserve space while application content loads. Member row placeholder — usage example.
Explain why a collection has no content and what to do next. Members on rings around a search icon — usage example.
Keyboard-navigable action and selection menu.
Animate a menu trigger between closed and open states. Menu button — usage example.
Animate a menu trigger between closed and open states. Menu button controlling navigation — usage example.
Animate a menu trigger between closed and open states. Menu button sizes — usage example.
Lay out one turn of a conversation with the message, its actions and, in a chat between people, an avatar and a header. Search terms: chat message, message actions, message group.
Join related controls into one visual group. Message actions with an overflow menu — usage example.
Group related content and actions on a surface. Message and error cards — usage example.
A message field for chat and AI interfaces that sends on Enter and turns Send into Stop while a reply runs. Message field with an attach button and a model picker — usage example.
Scroll a chat thread that opens at the latest message, follows a streaming reply and leads back to the latest message. Search terms: conversation, scroll to bottom, auto scroll, stick to bottom, AI chat.
Connect a control with its label, help and validation. Messages with an icon — usage example.
Enter and edit multiline text. Message that keeps five rows — usage example.
Show a measurement within a known range, such as storage used, with an optional status tone.
Open an edge panel with swipe dismissal. Mobile navigation drawer — usage example.
A message field for chat and AI interfaces that sends on Enter and turns Send into Stop while a reply runs. Model and effort pickers in the toolbar — usage example.
Join a small badge and a message in one pill, such as a release note or a status line above a heading. Modern badge groups with colored dots — usage example.
Show how a total divides into shares as a donut or pie chart. Monthly revenue by plan as a pie — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Search terms: presence, animate presence, transition, list, reorder, reveal, swap, enter, exit, rolling number, odometer, counter, tween, chart, shimmer, thinking.
Choose a date, several dates or a date range. Multiple dates — usage example.
Choose one option with the browser's own select element, styled like the Select trigger. Search terms: html select, dropdown.
Choose one option with the browser's own select element, styled like the Select trigger. Native select sizes — usage example.
Choose one option with the browser's own select element, styled like the Select trigger. Native select surface variants — usage example.
Native HTML table in the look of Table, for content that people read and for cells whose inputs and buttons keep their own tab stops. Search terms: static table, report, markdown table.
Open site sections from a row of links with dropdown panels. Search terms: navbar, mega menu.