Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Show a payment card with its issuer, cardholder, number, expiry date and network mark, in one of thirteen looks. Clear glass and translucent cards on a gradient — usage example.
Show ordered steps and their progress. Clickable setup steps — 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. Client portal address with a copy action — usage example.
Trigger an action with a text label, an icon, or both. Close buttons in five sizes and on a dark surface — usage example.
Inline and block code with optional syntax highlighting, a title, line numbers and marked lines, a reveal and clipboard actions. Search terms: snippet.
Optional syntax highlighting for Code Block. Import it once in client code; shiki loads when a block first names a language.
Enter a short verification code in separate or joined slots. Code sizes — usage example.
Enter a short verification code in separate or joined slots. Code, soft, masking and disabled — usage example.
Show the current location within a navigation hierarchy. Collapsed path — usage example.
Compact disclosure for a single section of content.
Color editor with saturation, hue, hex and RGB controls.
Choose a hex color with a swatch, hue slider, and channel fields. Color picker in a form — usage example.
Choose a hex color with a swatch, hue slider, and channel fields. Color picker sizes and swatch-only trigger — usage example.
Single-selection palette of named color swatches.
Searchable single- and multi-selection control with animated chips, grouped results and form integration.
Search and choose from known options. Combobox, default, soft and disabled — usage example.
Search and choose from known options. Combobox sizes — usage example.
Searchable keyboard-first action collection.
Find and run actions in an inline list or a dialog. Command palette — usage example.
Attach text, icons or actions to an input surface. Comment box with footer — usage example.
Open an edge panel with swipe dismissal. Comments drawer with snap points — usage example.
Display resources with status indicators, metadata and optional interactive rows. Compact list on a soft surface — usage example.
Move between pages of a long list or table. Compact pagination — usage example.
Edit a numeric value with typing, stepping or scrubbing. Compact quantity field — usage example.
Choose files in a field that shows their names and ends with an Upload button, and send them with a form. Company logo file input — usage example.
Show the details of one record as label and value rows, side by side or stacked. Connection details with dividers — usage example.
Show the text of a chat message on a surface that fits its sender and purpose. Consecutive bubbles 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. Consecutive turns from two people — usage example.
Submit related fields and display validation feedback. Contact details form — usage example.
Constrain overflowing content with styled scrollbars. Content scrolling in both directions — usage example.
Pointer and keyboard context menu sharing Menu presentation.
Show actions for an element on right-click or long press. Context menu with icons and shortcuts — usage example.
Show actions for an element on right-click or long press. Context menu with link items — usage example.
Edit a date with keyboard segments or a calendar. Contract start with a help tooltip — usage example.
Choose files in a field that shows their names and ends with an Upload button, and send them with a form. Contract upload that starts when a file is picked — usage example.
Select or clear an independent option. Controlled checkbox — usage example.
Choose a hex color with a swatch, hue slider, and channel fields. Controlled color — usage example.
Choose any number of related options. Controlled column visibility — usage example.
Build application navigation with desktop collapse and a mobile sheet. Controlled desktop state — usage example.
Toggle a button between pressed and unpressed states. Controlled italic toggle — usage example.
Edit a date with keyboard segments or a calendar. Controlled meeting date — usage example.
Choose a date from a button-triggered calendar. Controlled meeting date — usage example.
Edit a local date and time in one control. Controlled meeting start — usage example.
Edit an hour and minute with segments or a selector. Controlled meeting time — usage example.
Enter a short verification code in separate or joined slots. Controlled one-time password — usage example.
Open site sections from a row of links with dropdown panels. Controlled open panel — usage example.
Choose a numeric value or range by moving one or more thumbs. Controlled price range — usage example.
Arrange labeled settings and their controls in a shared card. Controlled profile settings — usage example.