Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Display, select, and remove a keyboard-navigable collection of tags. Team tags with project counts — usage example.
Select or clear an independent option. Terms checkbox — usage example.
Give a native form control a visible accessible name. Terms checkbox label — usage example.
Display a focused task in an overlay with a title and a clear close action. Terms of service with scrollable content — usage example.
Group related pressed-state buttons. Text alignment — usage example.
Base UI-backed multi-line text control.
Enter and edit multiline text. Textarea sizes — usage example.
Enter and edit multiline text. Textarea surface variants — usage example.
Enter and edit multiline text. Textareas with and without the resize grip — usage example.
Show a drawing of a cloud, a box, a credit card or a few documents, with an optional glyph, to give an empty state its picture. The cloud, box, credit card and documents — usage example.
Sign in with Google, Facebook, Apple, X, Figma or Dribbble on a button that shows the provider's logo, in its brand color or neutral. The color and gray themes — usage example.
A glyph in a tinted circle, a solid or raised square or with pulsing rings, to lead a message, a dialog or an empty state. The five tones in the light, gradient and dark variants — usage example.
Show how one or several measures change over time as filled areas, overlaid or stacked. The gradient and the solid fill — usage example.
A glyph in a tinted circle, a solid or raised square or with pulsing rings, to lead a message, a dialog or an empty state. The light, gradient, dark, modern, modern-neue and outline variants — usage example.
Link to your app on the App Store, Google Play, Galaxy Store or AppGallery with a badge that shows the store's mark and name, in black or as an outline. The md, lg and xl sizes — usage example.
Switch between light and dark mode with an animated sun and moon toggle. Theme toggle — usage example.
Animated sun and moon toggles that switch between light and dark mode. Search terms: actions.
Switch between light and dark mode with an animated sun and moon toggle. Theme toggle sizes — usage example.
Show the trend of one or several measures in a small chart without axes. The same revenue on a scale from 0 and from its lowest value — usage example.
Show the text of a chat message on a surface that fits its sender and purpose. The six variants — usage example.
Show how much of an operation has completed. The value beside and below the bar — usage example.
Show progress toward a goal as a ring that fills, or compare a few measures as concentric rings against one maximum. Three quarterly goals as concentric rings — usage example.
Segmented, locale-aware time entry with an optional compact hour and minute selector. Search terms: hours, minutes, form.
Edit an hour and minute with segments or a selector. Time field in a form — usage example.
Ordered event history with semantic and shaped markers.
Search and choose from known options. Timezone combobox with groups — usage example.
Choose one option with the browser's own select element, styled like the Select trigger. Time zone native select with groups — usage example.
Transient status messages managed through a scoped provider.
Show temporary feedback with dismissible notifications. Toast types — usage example.
Show temporary feedback with dismissible notifications. Toast with title and description — usage example.
Show temporary feedback with dismissible notifications. Toast with undo action — usage example.
Base UI-backed pressed-state action.
Base UI-backed single or multiple pressed selection.
Group related pressed-state buttons. Toggle group sizes — usage example.
Toggle a button between pressed and unpressed states. Toggle sizes — usage example.
Keyboard-navigable group of application controls.
Show the steps an agent took, such as its reasoning, tool calls and sources, as one-line rows that expand to their details. Tool calls with their output, a failure and a denial — usage example.
Explain why a collection has no content and what to do next. Tool logos drifting above an integrations prompt — usage example.
Short contextual label for hoverable or focusable controls.
Add a short description to a control on hover or focus. Tooltip on a disabled button — usage example.
Add a short description to a control on hover or focus. Tooltips with an arrow on each side — usage example.
Add a short description to a control on hover or focus. Tooltip with a title and supporting text — usage example.
Type free-text tags into a field that shows each one as a removable tag before the text. Topics sent with a form — usage example.
Rank labeled values with a bar for each, relative to the largest. Top pages by visitors — usage example.
Rank labeled values with a bar for each, relative to the largest. Top pages that glide when the period changes — usage example.
Rank labeled values with a bar for each, relative to the largest. Top pages with their paths — usage example.
Show the steps an AI agent took, such as its reasoning, tool calls and sources, as one-line rows that can expand to their details. Search terms: agent steps, thinking, chain of thought, citations.
Show how a total divides into shares as a donut or pie chart. Traffic by channel in percent — usage example.