Components your AI coding agent installs by itself.

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, and a configurable reset timeout. Use it next to code blocks, API keys, share links, or any inline value a user might want to copy.

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 palettes, tooltips, menu items, docs, onboarding, and keyboard-shortcut help dialogs. Unlike a plain styled <span> it uses the semantic <kbd> tag so the key is announced as keyboard input. Theme-aware via shadcn tokens; no dependencies.

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 dashboard has no items yet. Dashed border, muted text, fully accessible.

Compact metric card showing a label, a big value, and an optional percentage delta with an up/down arrow (green for positive, red for negative). Use it in dashboards, analytics, and KPI rows. Composes well into dashboard blocks.

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' class on the html element. No next-themes or provider required. Sun/Moon icons, aria-pressed.

Row of overlapping circular avatars that collapses the remainder into a '+N' badge past a max count. Falls back to an initial when no image is provided. Use it for team members, participants, collaborators, or assignees.

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 stays out of the tab order. Use it in sign-up, login, and reset-password forms.

Accessible loading spinner with role=status, an aria-live region, and a screen-reader label. Use it for inline loading, button busy states, or anywhere you need to indicate a pending async operation. Animated lucide Loader2.

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 developer marketing pages to show installable commands or code. Demonstrates how pulld premium blocks compose free atoms.

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; an optional loadingText swaps the label. Composes pulld's spinner atom.

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-reverts after a timeout and on blur so a stray click can't fire. Use it for delete, remove, reset, revoke, unsubscribe, or disconnect actions where a full alert dialog is overkill. Theme-aware via shadcn destructive tokens; no dependencies.

A production-ready ⌘K command palette: accessible (combobox/listbox roles, aria-activedescendant, focus trapped and restored), full keyboard navigation with wrap-around, fuzzy filtering with match highlighting, grouped results, recents, and an async `source` hook so you can plug in server-side or semantic search. Use it for global search, quick actions, and navigation in any app. Pairs with pulld Search via the exported `pulldSearchSource` helper for hosted semantic search — index your content and get meaning-based results with no search infra to run.

A production-ready toast/notification system: call toast(), toast.success/error/info/warning/loading or toast.promise() from anywhere — no provider or context needed — and render one <Toaster />. Auto-dismiss with pause-on-hover and focus, swipe-to-dismiss, six positions, action buttons, and accessible live regions (assertive for errors, polite otherwise). Enter/exit animation respects prefers-reduced-motion. Use it for success/error feedback, async operation status, and undo prompts.

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 or uncontrolled, forwards a ref so you can focus it from a keyboard shortcut (e.g. "/"), hides the browser's native search-cancel button, and clearing fires onChange so list/table/typeahead filtering updates. Use it to filter lists, tables, command menus, dropdowns, or any search box. Unlike a bare input it ships the icon, the clear control, and accessible focus rings out of the box. Theme-aware via shadcn tokens; depends only on lucide-react.

Number field with − and + stepper buttons that respect min, max, and step (including decimal steps), so users adjust a value without selecting and retyping. Works controlled or uncontrolled, forwards a ref, clamps at the bounds and disables the button once a limit is reached, and steps via a native input event so onChange fires and your form or state stays in sync. Use it for quantity pickers in carts and order forms, price or amount fields, numeric settings like font size, padding, or count, and any spinbutton-style input. Unlike a bare <input type="number"> it ships accessible, theme-aware +/− controls and hides the browser's inconsistent native spinners. Theme-aware via shadcn tokens; depends only on lucide-react.