Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Label a status, category, or count. A New label and an unread count — usage example.
Show a file or an image attached to a message or a draft, with its upload state. An image card that opens a preview — usage example.
Fill sweep, passing fill, running arrow and expanding button family. Search terms: actions, arrow button, carousel arrows, hover fill, entrance.
Compare values across categories as columns or horizontal bars, side by side or stacked. API requests by region and month — usage example.
Navigate a responsive workspace with a sidebar, header, and content region. Application shell — complete application example.
Choose a date, several dates or a date range. Appointment date calendar — usage example.
Present events in chronological order. Appointments today with the now marker — usage example.
Show the steps an agent took, such as its reasoning, tool calls and sources, as one-line rows that expand to their details. Approval of a tool call — usage example.
Show slides one at a time and move between them with arrows, dots, the arrow keys or a swipe. A product tour of three pictures — 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. A question and an answer with message actions — usage example.
Show how one or several measures change over time as filled areas, overlaid or stacked. Search terms: trend, time series, graph, analytics.
Lay out one turn of a conversation with the message, its actions and, in a chat between people, an avatar and a header. A reply that failed, with Try again — usage example.
Show a line in a conversation that is not a message, such as a status, a note or a date. A reply that the person stopped — usage example.
Set rendered markdown, such as a chat answer or a document, in the kit’s type. A review in the document density — usage example.
Show how a total divides into shares as a donut or pie chart. A ring that glides when the period or the shares change — 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. Arrow on a tile and bare arrow — usage example.
Show several people as a row of overlapping avatars with an optional overflow count. A small and a large overflow count — usage example.
Show the trend of one or several measures in a small chart without axes. A sparkline that morphs when the period changes — usage example.
Offer a compact list of actions and choices. Assignee menu with names and email addresses — usage example.
Search and choose from known options. Assignee picker — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. A step that shimmers while it runs — usage example.
Show slides one at a time and move between them with arrows, dots, the arrow keys or a swipe. A tour with a caption and a button that starts over — usage example.
Show a file or an image attached to a message or a draft, with its upload state. Search terms: thumbnail, file chip, file part, chat.
Enter a single line of text or a native input value. Attachment file input — usage example.
Choose files in a field that shows their names and ends with an Upload button, and send them with a form. Attachments that take several files — usage example.
Show a file or an image attached to a message or a draft, with its upload state. A user message with an image and a PDF — usage example.
Text input with suggestions and no selection state.
Suggest completions while allowing free text. Autocomplete, default, soft and disabled — usage example.
Suggest completions while allowing free text. Autocomplete sizes — usage example.
Image and fallback avatar compound component.
Show several people as a row of overlapping avatars with an optional overflow count. Search terms: avatar stack, facepile, members.
Show several people as a row of overlapping avatars with an optional overflow count. Avatar groups in six sizes — usage example.
Show a person, a team or an account as an avatar with a title and a subtitle beside it. Search terms: avatar with name, user cell, name and email, profile row, account row.
Show a person, a team or an account as an avatar with a title and a subtitle beside it. Avatar label groups at sm, md and lg — usage example.
Represent a person, a company or a workspace with an image or a text fallback. Avatar sizes and shapes — usage example.
Represent a person, a company or a workspace with an image or a text fallback. Avatars that link to profiles — usage example.
Represent a person, a company or a workspace with an image or a text fallback. Avatars with a border — usage example.
Represent a person, a company or a workspace with an image or a text fallback. Avatars with presence status — 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. Avatar trigger at the foot of a slim sidebar — usage example.
Polymorphic badge with semantic variants and responsive sizes.
Join a small badge and a message in one pill, such as a release note or a status line above a heading. Search terms: announcement badge, release note badge, new feature badge, notice.
Join a small badge and a message in one pill, such as a release note or a status line above a heading. Badge groups at md and lg — usage example.
Join a small badge and a message in one pill, such as a release note or a status line above a heading. Badge groups in five tints — usage example.
Join a small badge and a message in one pill, such as a release note or a status line above a heading. Badge groups that link to a changelog and an event — usage example.
Join a small badge and a message in one pill, such as a release note or a status line above a heading. Badge groups with the addon after the message — usage example.
Label a status, category, or count. Badge rendered as a link — usage example.
Label a status, category, or count. Badge sizes — usage example.
Label a status, category, or count. Badge variants — usage example.