@pulld

Accessible icon button that copies a string to the clipboard and shows a transient copied state. Has aria-label, an aria-live announcement, keyboard focus ring…

Inline keyboard key hint that renders a styled <kbd> element for showing shortcuts, hotkeys, and keybindings like Cmd+K, Ctrl+S, or ⇧⌘P. Use it in command pale…

Centered empty/zero-data placeholder with an optional icon, title, description, and call-to-action slot. Use it when a list, table, search result, inbox, or da…

The single-number tile at the top of a dashboard: a label, one big value, and an optional percentage change with an up or down arrow — green when the number mo…

Self-contained light/dark mode toggle button. Persists the choice to localStorage, respects the OS prefers-color-scheme on first load, and toggles the 'dark' c…

Row of overlapping circular avatars (a facepile) that collapses the overflow into a '+N' badge past a max count, with a letter-initial fallback when an avatar …

Password text input with a built-in show/hide toggle button. Toggles between password and text, has an accessible aria-label and aria-pressed, and the toggle s…

Accessible loading spinner (animated lucide Loader2) with role=status, aria-live, and a configurable screen-reader-only label so assistive tech announces the b…

Code snippet container with an optional language label and a hover/focus-revealed copy button (composes pulld's copy-button). Use it in docs, changelogs, and d…

Button that shows a spinner and disables itself while an async action is pending. Set loading=true during submit, save, or checkout to prevent double-clicks; a…

Two-step confirm button for destructive actions: the first click arms it and swaps the label to a confirmation prompt, the second click runs onConfirm. Auto-re…

A production-ready ⌘K command palette: accessible (combobox/listbox roles, aria-activedescendant, focus trapped and restored), full keyboard navigation with wr…

A production-ready toast/notification system: call toast(), toast.success/error/info/warning/loading or toast.promise() from anywhere — no provider or context …

Search field with a leading search icon and a trailing clear (✕) button that appears once there's text and empties the field, refocusing it. Works controlled o…

Number field with − and + stepper buttons that respect min, max, and step (including decimal steps), so users adjust a value without selecting and retyping. Wo…

One-time passcode / verification code input split into individual single-character slots (default 6). Use it for two-factor authentication (2FA), email confirm…

Multi-value text input that turns typed entries into removable chips — press Enter or comma to add a tag, click the × or press Backspace on an empty field to r…

Read-only input that shows a value with a copy button docked at its right edge — one click copies, and focusing or clicking the field selects the whole value f…

Horizontal group of 2–4 mutually exclusive options rendered as one pill/track — a lighter switch than Tabs for toggling a view, time range, unit, sort order, o…

Horizontal stepper that shows progress through a fixed sequence — numbered circle markers joined by a line, with each step rendered as complete (filled with a …

Star rating for both input and display, with half-star support. Use it to collect a score — rate this product, leave a review, a satisfaction or feedback ratin…

Vertical timeline that renders a list of events as dots on a connecting line, each with an optional time, title, and description. Use it for an activity feed, …

Dismissible top-of-page announcement / notice bar for a site-wide message: a new feature or launch, a promo/sale/campaign, a scheduled-maintenance or downtime …

Drag-and-drop file upload area that also opens the native file picker on click, Enter, or Space. Use it wherever a user uploads a file: an avatar or image uplo…

Circular (radial) progress indicator drawn with SVG stroke-dasharray, showing completion as a ring that fills clockwise from 12 o'clock with a smooth animated …

A pricing plan card for a pricing page, upsell, or paywall/subscription row: plan name, a big price with a billing period (e.g. $29 /mo), an optional short des…

An icon + title + description feature card for a "why us", benefits, or features grid on a landing or marketing page: a tinted icon square, a heading, and a li…

A semicircular (half-circle) gauge / dial that shows a single measurement within a known range, drawn with an SVG arc that fills from the left with a smooth an…

Auto-updating relative timestamp — "3 minutes ago", "just now", "in 2 days" — that re-renders on a timer so the label stays fresh without a reload. Use it wher…

Searchable multi-select dropdown — pick several options from a list, shown as removable badges in the trigger. Use it wherever a form needs "choose one or more…

A live countdown timer to a future moment — it re-renders every second, ticks down, never goes negative, and fires an onComplete callback once when it reaches …

Click-to-edit text that stays in place: it shows a value as plain text with a subtle pencil affordance, then swaps to an input right where the text was when yo…

A textarea that auto-grows as you type and stops at a maximum height, then scrolls. Use it wherever a fixed-height box is wrong: a chat, message, or AI prompt …

A money input that shows a grouped, currency-formatted amount ($1,234.50) when idle and the raw number while you're editing, so the cursor never fights the tho…

A text input whose label rests inside the field like a placeholder, then shrinks and floats up onto the top border the moment the field is focused or has a val…

The bar that appears once rows are selected in a table or list — it shows "3 items selected", holds your bulk actions (delete, archive, export, assign, move, a…

The small inline "Saving… / Saved 2 minutes ago / Couldn't save · Retry" indicator that sits beside an autosaving surface. Use it wherever edits persist in the…

The block that appears above a form after a failed submit — "There are 3 problems with your submission" followed by one link per error that jumps focus straigh…

The confirmation step in front of an irreversible action: the user has to type the resource's own name ("acme-prod") before the destructive button turns on. Us…

The help sheet that opens when the user presses ? — a modal listing every keyboard shortcut in the app, grouped by area, with the key caps drawn per platform. …

The list of files under a dropzone or file picker — one row each with the file name, its size, a progress bar while it uploads, an error with a retry button wh…

The asymmetric panel grid behind most modern feature sections: a set of cards on one grid where a few cells are deliberately two columns wide or two rows tall,…