Finished React components with every state and micro-interaction built in, plus a skill for your coding agent. Free with full source.
Build a menu with DropdownMenu-prefixed part names. Glass dropdown menu — usage example.
Offer a compact list of actions and choices. Glass menu — usage example.
Open contextual content next to a trigger. Glass popover — usage example.
Add a short description to a control on hover or focus. Glass tooltip — usage example.
Composition for visually joined controls, text segments, and separators.
Show actions for an element on right-click or long press. Grouped context menu with a submenu — usage example.
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. Grow, widen and fade entrances — usage example.
Represent a person, a company or a workspace with an image or a text fallback. Guest avatar with user icon — usage example.
Display inline code, or a block of code with a copy action, highlighting and line numbers. Highlighted component — usage example.
Constrain overflowing content with styled scrollbars. Horizontally scrolling tags — usage example.
Add a short description to a control on hover or focus. Icon button with tooltip — usage example.
Build application navigation with desktop collapse and a mobile sheet. Icon collapse and resize rail — usage example.
Menu button whose bars morph into a close icon. Search terms: actions.
Show a file’s type as a document icon with its extension. Icons beside file names — usage example.
Show a file’s type as a document icon with its extension. Icons by file type — usage example.
Show a file’s type as a document icon with its extension. Icons chosen by extension — usage example.
Show a file’s type as a document icon with its extension. Icon sizes — 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. Search terms: empty state illustration, empty state picture, cloud illustration, no data drawing, zero state.
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. Illustrations at sm, md and lg — usage example.
Show a file or an image attached to a message or a draft, with its upload state. Images and files attached to a draft — 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. Inline citations with a preview — usage example.
Display inline code, or a block of code with a copy action, highlighting and line numbers. Inline code in a sentence — usage example.
Find and run actions in an inline list or a dialog. Inline command with groups and shortcuts — usage example.
Base UI-backed text input and accessible field boundary.
Composite for related Input and Textarea controls, add-ons, segments, and focus routing.
Attach text, icons or actions to an input surface. Input group surfaces — usage example.
Enter a single line of text or a native input value. Input sizes — usage example.
Enter a single line of text or a native input value. Input surface variants — usage example.
Group related content and actions on a surface. Inset files in a card and elevated plans — usage example.
Open content in an edge panel. Inset invite sheet — usage example.
Compose a sidebar, header, and scrolling application content. Inset workspace shell — usage example.
Build application navigation with desktop collapse and a mobile sheet. Inset workspace sidebar — usage example.
Group related content and actions on a surface. Invite card with a line between two groups of the panel — usage example.
Explain why a collection has no content and what to do next. Invite team members — usage example.
Edit a date with keyboard segments or a calendar. Invoice date field — usage example.
Show record details in a right-side drawer. Invoice history with downloads — 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. Invoices — usage example.
Arrange search, filters and actions above a collection. Invoices filtered by a date range — usage example.
Label a status, category, or count. Invoice status badges — usage example.
Display structured data with keyboard navigation, optional sorting, and row selection. Invoices with striped rows — usage example.
Suggest completions while allowing free text. Job title field with suggestions — usage example.
Keyboard input notation for keys and grouped shortcuts.
Display a key or keyboard shortcut. Keys and key combinations — usage example.
Type free-text tags into a field that shows each one as a removable tag before the text. Keywords with a count and a clear button — usage example.
Polymorphic native label for standalone control association.
Select a named color or image from an application-owned palette. Label color swatches — usage example.
Select a named color or image from an application-owned palette. Label color swatches with a selection ring — usage example.
Search and choose from known options. Label picker with chips — usage example.