The full registry.
The components shadcn/ui doesn't ship: multi-select, combobox, tag input, currency input, file dropzone, plus 61 section blocks across 22 categories. Everything installs through the shadcn CLI, so the source ends up in your repo and stays yours to edit.
npx shadcn@latest add https://hirael.com/r/multi-select.jsonComponents
73 totalMulti Select
Chip-based multi-select with command-palette dropdown, search, select-all and async loader. Compound and single-prop APIs.
/components/inputs/multi-select →Number Range
Two-thumb slider paired with synced number inputs. Min/max/step, currency or unit formatting, keyboard-first.
/components/inputs/number-range →Tag Input
Chip input with paste-to-split, dedupe, validation hook, max tags. Compound and single-prop APIs.
/components/inputs/tag-input →Combobox
Searchable select on Base UI: single or multiple selection, chips, grouped options, an input addon slot and a clear button.
/components/inputs/combobox →Lazy Select
Autocomplete single-select that defers loading until open and pages through results on scroll. Debounced server-side search with a pluggable lazy paginator hook.
/components/inputs/lazy-select →Password Input
Show/hide toggle with an optional pluggable strength meter. Compound and single-prop APIs.
/components/inputs/password-input →Currency Input
Locale-aware grouping with currency-symbol prefix and configurable decimal precision.
/components/inputs/currency-input →Phone Input
Country dial-code dropdown with E.164 output. Compound and single-prop APIs.
/components/inputs/phone-input →Rating
Star rating with hover preview, half-star precision, read-only mode and sm / md / lg sizes.
/components/inputs/rating →Mention Input
@-mention textarea with caret-anchored autocomplete, highlighted mention chips, async search and multiple trigger characters.
/components/inputs/mention-input →Rich Text Editor
Tiptap editor with a formatting toolbar (headings, lists, links, highlight, alignment) and a hover bubble to edit or unlink links inline. Outputs HTML, controlled or uncontrolled, with composable parts.
/components/inputs/rich-text-editor →Inline Edit
Click-to-edit text with preview, validation, async submit and confirm/cancel controls. Input and textarea modes.
/components/inputs/inline-edit →Signature Pad
Canvas signature capture with velocity-based ink, per-stroke undo, theme-aware re-inking and PNG/JPEG export via ref.
/components/inputs/signature-pad →
Year Picker
Decade-grid year picker with keyboard nav, min/max bounds, single or range mode.
/components/pickers/year-picker →Month Picker
4×3 month grid with year stepper, keyboard nav, min/max bounds, single or range mode.
/components/pickers/month-picker →Time Picker
Hour, minute and optional second scroll columns with 12/24h modes, step intervals and keyboard nav.
/components/pickers/time-picker →Color Picker
SV gradient + hue slider with HEX / RGB / HSL tabs, eyedropper (where supported) and recent swatches.
/components/pickers/color-picker →Date Picker
Single-date picker with month grid, keyboard nav, min/max bounds and disabled dates. Includes an inline DateCalendar, no date library.
/components/pickers/date-picker →Date Range Picker
Dual-month range picker with hover preview, presets, min/max bounds and keyboard nav. Includes an inline DateRangeCalendar, no date library.
/components/pickers/date-range-picker →
File Dropzone
Drag-drop + click upload zone with previews, accept and max-size validation. Compound and single-prop APIs.
/components/files/file-dropzone →Image Cropper
Pan-and-zoom image cropper with rect or round mask, fixed aspect frame, pinch / wheel / keyboard control and canvas export via ref.
/components/files/image-cropper →Media Input
Local media file picker that previews via an object URL; empty-state prompt, replace and clear, size validation. Nothing leaves the browser.
/components/files/media-input →
Stat Card
Compact metric card with label, value, and an up/down/flat trend chip. Compound and single-prop APIs.
/components/data/stat-card →Timeline
Vertical event timeline with default or icon dots, tone variants and labelled time / title / description parts.
/components/data/timeline →Avatar Stack
Overlapping avatar group with size (sm/md/lg) and spacing (tight/normal/loose) variants, image or fallback support, numeric overflow chip, and asChild on items/overflow so each avatar can render as a link or button.
/components/data/avatar-stack →Tree View
Collapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus.
/components/data/tree-view →Animated Number
Count-up number that tweens to its target with easing, Intl formatting (currency, compact, percent), prefix/suffix and reduced-motion support.
/components/data/animated-number →Sortable
Drag-to-reorder list with pointer and keyboard sorting, handle or whole-item dragging, and live-region announcements. No dnd-kit.
/components/data/sortable →Countdown Timer
Count-down-to-date timer with boxed / inline / minimal variants, a useCountdown hook, digit animation and completion content.
/components/data/countdown-timer →Calendar Heatmap
GitHub-style contribution heatmap with month and weekday labels, tooltips, configurable intensity scale and a legend.
/components/data/calendar-heatmap →Activity Feed
Avatar-led event feed with a connecting rail, actor and action lines, timestamps, quoted bodies and date dividers. Compound API.
/components/data/activity-feed →Audit Log
Compliance-style event log with expandable rows that reveal actor, action, status and request metadata. Compound disclosure API.
/components/data/audit-log →Data Table
TanStack-powered data table: faceted, text, range and date filters, sortable columns, column visibility, row selection and pagination, with page, sort and filters kept in the URL. One useDataTable hook drives it — pass pageCount to query server-side, or omit it to sort, filter and page a local array in memory. Ships as a folder of composable parts.
/components/data/data-table →
Kbd
3D tactile keycap with hover lift and pressed states. Compound API with KbdGroup for chords and KbdDisplay for inline keys.
/components/display/kbd →Callout
MDX-style admonition with info / success / warning / error / neutral variants and optional icon override. Ships --info / --success / --warning theme tokens.
/components/display/callout →Scroll Progress
Fixed reading progress bar. Tracks document scroll by default or a scoped container ref.
/components/display/scroll-progress →Announcement Bar
Top-of-page banner with default / primary / muted tones, optional dismiss button and localStorage persistence.
/components/display/announcement-bar →Spinner
Loading indicator with circle, dots and bars variants, sm / md / lg sizes. Inherits the current text color and ships an accessible status label.
/components/display/spinner →Copy Button
Click-to-copy button with copied feedback, icon-only or labelled, ghost / outline variants and a non-secure-context clipboard fallback.
/components/display/copy-button →Marquee
Infinite scrolling row or column for logos and testimonials, with pause-on-hover, reverse and vertical modes. Keyframes ship inline, zero config.
/components/display/marquee →Image Compare
Before/after comparison slider with a draggable, keyboard-accessible divider, horizontal or vertical orientation and hover-follow mode.
/components/display/image-compare →Lightbox
Fullscreen image lightbox on Radix Dialog with gallery navigation, zoom and pan, swipe gestures, captions and a thumbnail strip.
/components/display/lightbox →QR Code
Dependency-free QR code generator rendering crisp SVG, with L/M/Q/H error correction, quiet-zone control and currentColor theming.
/components/display/qr-code →Code Block
Code display with built-in dependency-free syntax highlighting via theme tokens, line numbers, line highlights, diff gutters, copy button and collapsible max-height.
/components/display/code-block →Masonry
True masonry layout that balances children into the shortest column by measured height, order-preserving, responsive, dependency-free.
/components/display/masonry →Audio Player
Composable audio player with play/pause, scrub-safe seek with buffered tint, skip, time readouts, volume and playback rate.
/components/display/audio-player →Confirm
Imperative confirmation dialog: a root provider plus a useConfirm hook that resolves a promise on confirm or cancel. Default or destructive tone, an optional icon, and an async confirm action with a pending spinner.
/components/display/confirm →Unsaved Guard
Unsaved-changes guard: a root provider plus a useUnsavedGuard hook. Warns before reload, tab close and in-app link navigation, and returns a guard(proceed) to wrap programmatic navigation in a confirm dialog.
/components/display/unsaved-guard →
Blur Reveal
Reveals content with a blur, fade and lift as it scrolls into view. Configurable delay, duration and threshold; respects reduced-motion.
/components/animation/blur-reveal →Text Reveal
Staggered text entrance that masks and slides each word, character or line into place on scroll. Respects reduced-motion.
/components/animation/text-reveal →Scroll Reveal
Fades and slides content in from any direction as it enters the viewport. Configurable distance, delay and replay; respects reduced-motion.
/components/animation/scroll-reveal →Spotlight Card
Card surface with a soft spotlight that tracks the cursor and fades in on hover. Built on design tokens, no hard-coded colors.
/components/animation/spotlight-card →Magnetic Button
Button that pulls toward the cursor and springs back on leave. Adjustable strength, asChild to wrap a link, respects reduced-motion.
/components/animation/magnetic-button →Cursor Glow
Ambient glow layer that follows the pointer across its container and fades when it leaves. Drop it behind heroes, grids or feature panels.
/components/animation/cursor-glow →Tilt Card
3D pointer tilt with optional cursor-following glare and configurable max angle, scale and perspective. Respects reduced-motion.
/components/animation/tilt-card →Morphing Dialog
A trigger card that morphs into a centered dialog via shared-layout animation, with focus trapping, scroll lock, Esc to close and reduced-motion support.
/components/animation/morphing-dialog →
Stepper
Multi-step progress indicator with horizontal and vertical orientation, completed / active / inactive states, clickable steps and a compound API.
/components/navigation/stepper →Tour
Onboarding spotlight that dims the page around a target element and walks users through steps with a positioned coach-mark card.
/components/navigation/tour →Dock
macOS-style dock with cursor magnification: icons scale and spring as the pointer passes, with hover and focus labels. Built on framer-motion.
/components/navigation/dock →Floating Action Button
Expanding speed-dial FAB: a primary trigger that rotates open to stagger a stack of secondary actions on any side. Compound API.
/components/navigation/floating-action-button →Floating Toolbar
Floating pill toolbar for text selection and canvas actions, with toggle buttons, separators and labels. Position it anywhere.
/components/navigation/floating-toolbar →Split View
Two-pane master/detail layout with a draggable divider, keyboard resize, min/max bounds and horizontal or vertical orientation. RTL-aware.
/components/navigation/split-view →Resizable Panels
Composable resizable panel groups with draggable, keyboard-accessible handles, per-panel minimums and nestable horizontal or vertical groups. RTL-aware.
/components/navigation/resizable-panels →Inspector Panel
Design-tool inspector with a header, collapsible sections and label/control rows. Compound API for property panels and sidebars.
/components/navigation/inspector-panel →Tenant Switcher
Workspace, organization or project switcher for multi-tenant apps. Logo or initials, plan or role caption, grouped and searchable list, and a create action. Compound API.
/components/navigation/tenant-switcher →Table of Contents
On-this-page navigation that tracks the active heading as you scroll and highlights it with a moving border marker. Takes a flat or nested items list, or composes from parts. Smooth scroll respects reduced-motion.
/components/navigation/toc →
KPI Grid
Hairline-joined grid of KPI tiles with label, value, an up/down/flat delta chip and a dependency-free sparkline. Compound API.
/components/widgets/kpi-grid →Quick Actions
Grid of dashboard shortcut tiles with icon, label and description. Each tile is a button or, via asChild, a link. Compound API.
/components/widgets/quick-actions →Notifications
Notification panel with header, list, per-item media, title, description, time and an accent-cool unread marker. Compound API.
/components/widgets/notifications →
Billing Card
Current-plan summary with price, a usage meter, billing detail rows and footer actions. Compound API for billing settings.
/components/saas/billing-card →Subscription Plans
In-app plan selector with featured and current states, a badge, feature checklist and per-plan action. Compound API.
/components/saas/subscription-plans →API Keys
API key manager with reveal/hide, copy-to-clipboard, key metadata and a create action. Compound API.
/components/saas/api-keys →Usage Dashboard
Metered usage panel with per-resource progress bars that tint amber near the limit and red over it. Compound API.
/components/saas/usage-dashboard →
Section blocks
61 blocks · view allDrop-in section compositions: heroes, features, pricing, testimonials, CTAs, FAQs, auth, navigation, errors. Each block shares the same registry pipeline; copy a block in one command.
Features
3How it works
1Pricing
2Comparison
1Testimonials
3Newsletter
1Headers
1404
1Logo cloud
1Contact
2Careers
1Blog
1E-commerce
2Integrations
1Image gallery
1Composition (the shadcn way)
Every compound component ships as flat top-level exports, no namespacing, no convenience wrappers. The bare name is the root primitive and holds state; every rendered piece carries adata-slotattribute for downstream styling.
import {
MultiSelect,
MultiSelectContent,
MultiSelectTrigger,
} from "@/components/ui/multi-select"
<MultiSelect value={value} onValueChange={setValue} options={options}>
<MultiSelectTrigger placeholder="Pick…" />
<MultiSelectContent searchPlaceholder="Filter…" />
</MultiSelect>