Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Rank labeled values with a bar for each, relative to the largest. Traffic sources under a heading row — usage example.
Rank labeled values with a bar for each, relative to the largest. Traffic sources with icons — usage example.
Cut text after one line or a number of lines with an ellipsis, and show the full text in a tooltip. Search terms: line clamp, line-clamp, text overflow, clamp, overflow tooltip.
Show the text of a chat message on a surface that fits its sender and purpose. Two messages from two people — 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. Two people with names, times and a delivery status — usage example.
Set rendered markdown, such as a chat answer or a document, in the kit's type, with a map for the components prop of a markdown renderer. Search terms: prose, typography, rich text, react-markdown, streamdown.
Switch between associated content panels. Underline tabs with a divider — usage example.
Show how much of an operation has completed. Upload progress bar — usage example.
Show how much of an operation has completed. Upload size in megabytes — 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. Used space with a progress bar — 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. Used space with a progress ring — usage example.
Preview a link’s destination without leaving the current page. User profile preview — usage example.
Enter a short verification code in separate or joined slots. Verification code — usage example.
Enter a short verification code in separate or joined slots. Verification code form — usage example.
Enter a short verification code in separate or joined slots. Verification code in a joined field — usage example.
Enter a short verification code in separate or joined slots. Verification code in two groups — usage example.
Enter a short verification code in separate or joined slots. Verification codes at the three display sizes — usage example.
Represent a person, a company or a workspace with an image or a text fallback. Verified profile photos at 3xl, 4xl and 5xl — usage example.
Divide related sections with a horizontal or vertical line. Vertical separators between items — usage example.
Switch between associated content panels. Vertical tabs — usage example.
Group related pressed-state buttons. Vertical toggle group — usage example.
Join related controls into one visual group. Vertical zoom controls — usage example.
Show actions for an element on right-click or long press. View options context menu — usage example.
Group related pressed-state buttons. View switcher with label — usage example.
Choose from a fixed set of options without text filtering. Visibility select with icons — usage example.
Rank labeled values with a bar for each, relative to the largest. Visitors by device, right to left — usage example.
Show how one or several measures change over time as filled areas, overlaid or stacked. Visitors by source, stacked — usage example.
Show the trend of one or several measures in a small chart without axes. Visitors over 14 days beside their total — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Visitors this week with today still running — usage example.
Show how one or several measures change over time or across ordered categories. Visits that glide when the period changes — usage example.
Choose a numeric value or range by moving one or more thumbs. Volume slider with value — usage example.
Join related controls into one visual group. Website address with a prefix — usage example.
Attach text, icons or actions to an input surface. Website and budget with text addons — usage example.
Choose a date from a button-triggered calendar. Weekday appointment date — usage example.
Edit a date with keyboard segments or a calendar. Weekday delivery date — usage example.
Edit a local date and time in one control. Weekday interview — usage example.
Label a status, category, or count. White badges with colored icons, and a sky badge with its own — usage example.
Edit an hour and minute with segments or a selector. Working hours — usage example.
Build application navigation with desktop collapse and a mobile sheet. Workspace and account rows with a detail line — usage example.
Search and choose from known options. Workspace field in a form — usage example.
Choose one item from a visible list. Workspace list with descriptions — usage example.
Offer a compact list of actions and choices. Workspace menu with a plan header and a version footer — usage example.
Give a native form control a visible accessible name. Workspace name label — usage example.
Compose a sidebar, header, and scrolling application content. Workspace on top — usage example.
Build application navigation with desktop collapse and a mobile sheet. Workspace on top — usage example.
Choose from a fixed set of options without text filtering. Workspace select — usage example.
Choose from a fixed set of options without text filtering. Workspace select in a form — usage example.
Enter a single line of text or a native input value. Workspace URL with a help tooltip — usage example.