Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Join a small badge and a message in one pill, such as a release note or a status line above a heading. A badge group with its own icon and one without — usage example.
Show a payment card with its issuer, cardholder, number, expiry date and network mark, in one of thirteen looks. A brand payment card — usage example.
Show a payment card with its issuer, cardholder, number, expiry date and network mark, in one of thirteen looks. A card at 240 px beside one at its default width — usage example.
Group related content and actions on a surface. A card on the page canvas and on the card color — usage example.
Feature one offer or status in a sidebar or a panel, such as the storage a team has used, with its progress and a pair of link actions. A card that is removed when it is dismissed — usage example.
Buttons with hover motion, such as a fill that sweeps in or passes through, an arrow that runs through, or an arrow that expands behind the label. Accent — usage example.
Single or multiple expandable disclosure sections.
Expand or collapse related content sections. Accordion controlled by a button — usage example.
Expand or collapse related content sections. Accordion with a disabled item — usage example.
Show the signed-in account in a sidebar and open a menu with its actions, a list of accounts to switch to and sign out. Search terms: account switcher, account menu, user menu, profile menu, switch account.
Show the signed-in account in a sidebar and open a menu with its actions, a list of accounts to switch to and sign out. Account card at the foot of a sidebar — usage example.
Show the signed-in account in a sidebar and open a menu with its actions, a list of accounts to switch to and sign out. Account card with two accounts — usage example.
Build a menu with DropdownMenu-prefixed part names. Account dropdown menu — usage example.
Offer a compact list of actions and choices. Account menu — usage example.
Offer a compact list of actions and choices. Account switcher with stacked email addresses — usage example.
Arrange search, filters and actions above a collection. Accounts with a status filter and removable tags — usage example.
Show a person, a team or an account as an avatar with a title and a subtitle beside it. Account with name and email — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. A chart that fills the room its card leaves — usage example.
Set rendered markdown, such as a chat answer or a document, in the kit’s type. A chat answer with a code fence and a table — usage example.
Show a drawing of a cloud, a box, a credit card or a few documents, with an optional glyph, to give an empty state its picture. A cloud with a magnifier — usage example.
Show how a total divides into shares as a donut or pie chart. A compact storage donut without a legend — usage example.
Copy a value to the clipboard with an icon button or a labeled button that confirms with a check, a tooltip and an announcement. A copy that works and a copy whose value fails to load — usage example.
The animated copy icon, selection check and reveal eye that CopyButton, Code and Resource List draw. Install copy-button to copy a value.
Compare values across categories as columns or horizontal bars, side by side or stacked. Active users by feature — usage example.
Show how one or several measures change over time or across ordered categories. Active users by month — usage example.
Show a line in a conversation that is not a message, such as a status, a note or a date. A date and a summary between divider lines — usage example.
Display, select, and remove a keyboard-navigable collection of tags. Add and remove labels — usage example.
Choose any number of related options. Add-on cards — usage example.
Show a drawing of a cloud, a box, a credit card or a few documents, with an optional glyph, to give an empty state its picture. A failed payment in an empty state — usage example.
Explain why a collection has no content and what to do next. A featured icon in an empty search result — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. A field error under an input — usage example.
Show a file or an image attached to a message or a draft, with its upload state. A file in each upload state — usage example.
Show which page of a carousel or a short sequence is current, as dots or line segments, and go to another page. A framed indicator on a slide — usage example.
Show slides one at a time and move between them with arrows, dots, the arrow keys or a swipe. A large carousel of four pictures — usage example.
Persistent feedback with semantic tone, optional actions and an optional close control, inline, as a page banner or as a card band. Search terms: notice.
Modal confirmation dialog for consequential actions.
Present an inline message with a title and optional actions. Alert variants — usage example.
Present an inline message with a title and optional actions. Alert with actions — usage example.
Show the trend of one or several measures in a small chart without axes. A line, a line with its fill, and the fill alone — usage example.
Show how one or several measures change over time or across ordered categories. A line chart that fills its card beside a taller card — usage example.
Show which page of a carousel or a short sequence is current, as dots or line segments, and go to another page. A line of three segments — usage example.
Trigger an action with a text label, an icon, or both. All button variants — usage example.
Scroll a chat thread that opens at the latest message, follows a streaming reply and leads back to the latest message. A long reply that streams in at the live edge — usage example.
Show a person, a team or an account as an avatar with a title and a subtitle beside it. A member who is online and a verified member — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. A message that expands and collapses — usage example.
Show how one or several measures change over time as filled areas, overlaid or stacked. An area chart that fills its card beside a taller card — usage example.
A message field for chat and AI interfaces that sends on Enter and turns Send into Stop while a reply runs. A new chat with suggestions — usage example.
Join a small badge and a message in one pill, such as a release note or a status line above a heading. A new feature announcement — usage example.