Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
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. Previous and next arrow buttons — usage example.
Choose a numeric value or range by moving one or more thumbs. Price range with floating values — usage example.
Display a key or keyboard shortcut. Print button with shortcut — usage example.
Connect a control with its label, help and validation. Product updates opt-in — usage example.
Represent a person, a company or a workspace with an image or a text fallback. Profile photo with initials fallback — usage example.
Native determinate or indeterminate task progress.
Show progress toward a goal as a ring that fills, or compare a few measures as concentric rings against one maximum. Progress rings at xs, sm, md and lg — usage example.
Show how much of an operation has completed. Progress with a floating value — usage example.
Show how much of an operation has completed. Progress with label and value — usage example.
Offer a compact list of actions and choices. Project actions menu — usage example.
Present events in chronological order. Project activity — usage example.
Display structured data with keyboard navigation, optional sorting, and row selection. Project budgets with caption and total — usage example.
Reserve space while application content loads. Project card placeholder — usage example.
Enter and edit multiline text. Project description — 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. Project estimate with inputs and a note button — usage example.
Display, select, and remove a keyboard-navigable collection of tags. Project labels — usage example.
Preview a link’s destination without leaving the current page. Project link preview — usage example.
Display resources with status indicators, metadata and optional interactive rows. Project list with status indicators — usage example.
Show several people as a row of overlapping avatars with an optional overflow count. Project members with an add button and its tooltip — usage example.
Show several people as a row of overlapping avatars with an optional overflow count. Project members with overflow count — usage example.
Represent a person, a company or a workspace with an image or a text fallback. Project members with overflow count — usage example.
Enter a single line of text or a native input value. Project name input — usage example.
Show a value as text and edit it in place in its field. Project name with an edit trigger — usage example.
Connect a control with its label, help and validation. Project name with description — usage example.
Display structured data with keyboard navigation, optional sorting, and row selection. Project overview — usage example.
Switch between associated content panels. Project overview tabs — usage example.
Display structured data with keyboard navigation, optional sorting, and row selection. Project row actions — usage example.
Search and choose from known options. Project search with a shortcut hint — usage example.
Suggest completions while allowing free text. Project search with suggestions — usage example.
Arrange labeled settings and their controls in a shared card. Project settings — usage example.
Connect a control with its label, help and validation. Project slug validation — usage example.
Display resources with status indicators, metadata and optional interactive rows. Projects with a Remove action — usage example.
Arrange search, filters and actions above a collection. Projects with search in the tab bar — usage example.
Type free-text tags into a field that shows each one as a removable tag before the text. Project tags input — usage example.
A message field for chat and AI interfaces that sends on Enter and turns Send into Stop while a reply runs. Search terms: composer, chat input, message input.
Compose a sidebar, header, and scrolling application content. Push workspace shell — usage example.
Build application navigation with desktop collapse and a mobile sheet. Push workspace sidebar — usage example.
Edit a numeric value with typing, stepping or scrubbing. Quantity field — usage example.
Display inline code, or a block of code with a copy action, highlighting and line numbers. Query that streams in — usage example.
Display inline code, or a block of code with a copy action, highlighting and line numbers. Query with its file name and line numbers — usage example.
Compare one or several series across a handful of measures on spokes that share one value axis. Search terms: spider chart, web chart, polar chart, star chart.
Show progress toward a goal as a ring that fills, or compare a few measures as concentric rings against one maximum. Search terms: progress circle, progress ring, activity rings, gauge.
Base UI-backed single-selection form group.
Choose one option from a related set. Radio group in a form — usage example.
Choose one option from a related set. Radio group sizes — usage example.
Choose one option from a related set. Radio options with descriptions — usage example.
Group related content and actions on a surface. Raised, header and subtle cards — usage example.
Open an edge panel with swipe dismissal. Readable and full-width bottom drawers — usage example.