Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Select a named color or image from an application-owned palette. Read-only and disabled swatches — 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. Read-only invite link with a copy action — 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. Reasoning that streams, then closes — usage example.
Display resources with status indicators, metadata and optional interactive rows. Recent changes in a card, divided by hairlines — usage example.
Group related content and actions on a surface. Recent invoices with a view-all link — usage example.
Display resources with status indicators, metadata and optional interactive rows. Recently published, with a header and clickable rows — usage example.
Enter a short verification code in separate or joined slots. Recovery code — usage example.
Show or hide a single section of content. Recovery keys disclosure — usage example.
Constrain overflowing content with styled scrollbars. Release history with a button back to the top — usage example.
Display, select, and remove a keyboard-navigable collection of tags. Removable filter tags — usage example.
Display a focused task in an overlay with a title and a clear close action. Rename project form — usage example.
Choose a date from a button-triggered calendar. Renewal date confirmed with Apply — usage example.
Enter and edit multiline text. Reply between two and six lines — usage example.
Choose a date, several dates or a date range. Report period with a list of shortcuts in a card — usage example.
Edit and select a start and end date. Report period with shortcuts, confirmed with Apply — usage example.
Choose one option with the browser's own select element, styled like the Select trigger. Request owner native select — usage example.
Give a native form control a visible accessible name. Required email with help text — usage example.
Select a named color or image from an application-owned palette. Required swatch selection in a form — 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. Research summary with its steps — usage example.
Reduced entity list with explicit indicator, content and meta slots.
Filter and sort projects, inspect a project, and confirm archiving. Resource management — complete application example.
Edit a numeric value with typing, stepping or scrubbing. Retry attempts with stacked steppers — usage example.
Animate items that appear, leave, move or replace one another, and numbers that change, with no animation code. Revenue and change that roll to new values — usage example.
Rank labeled values with a bar for each, relative to the largest. Revenue by country in US dollars — usage example.
Display tabular content, such as a report, in a native HTML table where each control in a cell keeps its own tab stop. Revenue by plan with caption and total — usage example.
Show progress toward a goal as a ring that fills, or compare a few measures as concentric rings against one maximum. Revenue toward a target and a completed setup — usage example.
Show how one or several measures change over time or across ordered categories. Revenue whose values roll from point to point — usage example.
Offer a compact list of actions and choices. Reviewer menu with a search field and checkbox rows — usage example.
Show several people as a row of overlapping avatars with an optional overflow count. Reviewers of a design review on a card — usage example.
Select a named color or image from an application-owned palette. Reviewer swatches with photos — usage example.
Present events in chronological order. Review history with icon markers — usage example.
Show how a total divides into shares as a donut or pie chart. Rings at xxs, sm and lg — usage example.
Explain why a collection has no content and what to do next. Rings behind a featured icon — usage example.
Choose from a fixed set of options without text filtering. Role select with help after its label — usage example.
Show how a total divides into shares as a donut or pie chart. Sales by region with a share that pops out — usage example.
Show progress toward a goal as a ring that fills, or compare a few measures as concentric rings against one maximum. Sales targets that glide when the period or the targets change — usage example.
Show a value as text and edit it in place in its field. Saved views that can be renamed — usage example.
Edit a local date and time in one control. Scheduled publish time — usage example.
Open an edge panel with swipe dismissal. Scrollable activity drawer — usage example.
Constrain overflowing content with styled scrollbars. Scrollable list of release tags — usage example.
Open content in an edge panel. Scrollable release notes — usage example.
Bounded overflow region with native overlay scrollbars, optional edge fades and gutter handling.
Constrain overflowing content with styled scrollbars. Scroll area with a pinned footer — usage example.
Indicate that an operation is still in progress. Search field while loading — usage example.
Display a key or keyboard shortcut. Search field with shortcut hint — usage example.
Join related controls into one visual group. Search form with an input and a submit button — usage example.
Attach text, icons or actions to an input surface. Search with icon — usage example.
Show progress toward a goal as a ring that fills, or compare a few measures as concentric rings against one maximum. Seats used on a plan as a progress ring — usage example.