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. Badge with light — usage example.
Present an inline message with a title and optional actions. Band in a card — usage example.
Measure a current value within a known range. Bandwidth usage in gigabytes — usage example.
Compare values across categories as columns or horizontal bars, side by side or stacked. Search terms: grouped, comparison, graph, analytics.
Rank labeled values with a bar for each, relative to the largest. Search terms: ranking, top list, leaderboard, horizontal bars, chart, analytics.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Bars that glide to new data — usage example.
Show the details of one record as label and value rows, side by side or stacked. Billing details with labels above the values — usage example.
Attach text, icons or actions to an input surface. Billing email with a help tooltip — usage example.
Connect a control with its label, help and validation. Billing email with help after its label — usage example.
Enter and edit multiline text. Bio with character limit — usage example.
Choose a date, several dates or a date range. Booked dates unavailable — usage example.
Toggle a button between pressed and unpressed states. Bookmark toggle — usage example.
Show a payment card with its issuer, cardholder, number, expiry date and network mark, in one of thirteen looks. Brand and gray faces — usage example.
Choose a hex color with a swatch, hue slider, and channel fields. Brand color field — usage example.
Semantic hierarchy trail with native navigation links.
Show the current location within a navigation hierarchy. Breadcrumb with a menu for hidden levels — usage example.
Show the text of a chat message on a surface that fits its sender and purpose. Search terms: chat bubble, message bubble, speech bubble.
Edit a numeric value with typing, stepping or scrubbing. Budget in US dollars — usage example.
Choose a numeric value or range by moving one or more thumbs. Budget with the value under the thumb — usage example.
Show how one or several measures change over time as filled areas, overlaid or stacked. Build minutes by hour on a monotone curve — usage example.
Action family with variants, sizes, loading behavior, single-line icon labels, and accessible disabled states.
Trigger an action with a text label, an icon, or both. Button and icon button sizes — usage example.
Trigger an action with a text label, an icon, or both. Button rendered as a link — usage example.
Trigger an action with a text label, an icon, or both. Button width and alignment — usage example.
Locale-aware inline calendar with single, contiguous range and multiple date selection.
Structured application surface for related content and actions.
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. Cards that fill with color — usage example.
Group related content and actions on a surface. Cards with an avatar, an icon and title context — usage example.
Cut text after one line or a number of lines with an ellipsis, and show the full text in a tooltip. Card title cut after one line, beside an icon and a link — usage example.
Cut text after one line or a number of lines with an ellipsis, and show the full text in a tooltip. Card title cut at half the width of the card — usage example.
Group related content and actions on a surface. Card with a 24 px inset — usage example.
Show slides one at a time and move between them with arrows, dots, the arrow keys or a swipe. Search terms: slideshow, image carousel, product tour, testimonials.
Edit a numeric value with typing, stepping or scrubbing. Cart quantity — usage example.
Display inline code, or a block of code with a copy action, highlighting and line numbers. Change with a removed and an added line — usage example.
Shared scales, curves, interaction, tooltip, legend and axes behind the Siteplane UI charts. Search terms: chart core, axis, d3, data visualization.
Build application navigation with desktop collapse and a mobile sheet. Chat history by date, with a menu for each conversation — usage example.
Scroll a chat thread that opens at the latest message, follows a streaming reply and leads back to the latest message. Chat thread with steps, suggestions and a message field — usage example.
Base UI-backed Boolean form choice.
Select or clear an independent option. Checkbox card — usage example.
Base UI-backed related multi-selection group.
Choose any number of related options. Checkbox group in a form — usage example.
Choose any number of related options. Checkbox group sizes — usage example.
Select or clear an independent option. Checkbox in a form — usage example.
Display structured data with keyboard navigation, optional sorting, and row selection. Checkbox selection — usage example.
Select or clear an independent option. Checkbox sizes — usage example.
Select or clear an independent option. Checkbox with description — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Chips that wrap and glide — usage example.
Show how much of an operation has completed. Circular progress sizes — usage example.