Multi Select
InputsChip-based multi-select with command-palette dropdown, search, select-all and async loader. Compound and single-prop APIs.
View75 components shadcn/ui doesn't ship, live below so you can try each one before installing. One command copies the source into your repo.
npx shadcn@latest add https://hirael.com/r/multi-select.jsonChip-based multi-select with command-palette dropdown, search, select-all and async loader. Compound and single-prop APIs.
ViewTwo-thumb slider paired with synced number inputs. Min/max/step, currency or unit formatting, keyboard-first.
ViewChip input with paste-to-split, dedupe, validation hook, max tags. Compound and single-prop APIs.
ViewSearchable select on Base UI: single or multiple selection, chips, grouped options, an input addon slot and a clear button.
ViewAutocomplete single-select that defers loading until open and pages through results on scroll. Debounced server-side search with a pluggable lazy paginator hook.
ViewShow/hide toggle with an optional pluggable strength meter. Compound and single-prop APIs.
ViewLocale-aware grouping with currency-symbol prefix and configurable decimal precision.
ViewStar rating with hover preview, half-star precision, read-only mode and sm / md / lg sizes.
View@-mention textarea with caret-anchored autocomplete, highlighted mention chips, async search and multiple trigger characters.
ViewTiptap 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.
ViewClick-to-edit text with preview, validation, async submit and confirm/cancel controls. Input and textarea modes.
ViewCanvas signature capture with velocity-based ink, per-stroke undo, theme-aware re-inking and PNG/JPEG export via ref.
ViewEditable code field with dependency-free YAML syntax highlighting, a line-number gutter and tab-to-indent. Controlled or uncontrolled.
ViewVisual cron builder kept in sync with the raw expression. Presets, per-field modes, validation, a plain-English preview, and the next run times.
ViewSearchable country picker with flag emoji, pinned countries, optional dial codes, and single or multiple selection. Search by name or ISO code.
ViewCard number, expiry, and CVC in one row with brand detection, per-brand grouping, Luhn and expiry validation, and auto-advance between fields.
ViewDecade-grid year picker with keyboard nav, min/max bounds, single or range mode.
View4×3 month grid with year stepper, keyboard nav, min/max bounds, single or range mode.
ViewHour, minute and optional second scroll columns with 12/24h modes, step intervals and keyboard nav.
ViewSV gradient + hue slider with HEX / RGB / HSL tabs, eyedropper (where supported) and recent swatches.
ViewSingle-date picker with month grid, keyboard nav, min/max bounds and disabled dates. Includes an inline DateCalendar, no date library.
ViewDual-month range picker with hover preview, presets, min/max bounds and keyboard nav. Includes an inline DateRangeCalendar, no date library.
ViewSelf-contained emoji grid with 560+ emoji in 8 categories, keyword search, recents, skin tones, and arrow-key navigation. No dependencies.
ViewDrag-drop + click upload zone with previews, accept and max-size validation. Compound and single-prop APIs.
ViewPan-and-zoom image cropper with rect or round mask, fixed aspect frame, pinch / wheel / keyboard control and canvas export via ref.
ViewLocal media file picker that previews via an object URL; empty-state prompt, replace and clear, size validation. Nothing leaves the browser.
ViewClick or drop an image, crop it to a circle or square with zoom, and preview the result. Initials fallback, size and type limits, remove control.
ViewCompact metric card with label, value, and an up/down/flat trend chip. Compound and single-prop APIs.
ViewVertical event timeline with default or icon dots, tone variants and labelled time / title / description parts.
ViewOverlapping 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.
ViewCollapsible nested tree for file explorers and hierarchical data, with auto folder/file icons, depth indentation, selection and keyboard focus.
ViewCount-up number that tweens to its target with easing, Intl formatting (currency, compact, percent), prefix/suffix and reduced-motion support.
ViewDrag-to-reorder list with pointer and keyboard sorting, handle or whole-item dragging, and live-region announcements. No dnd-kit.
ViewCount-down-to-date timer with boxed / inline / minimal variants, a useCountdown hook, digit animation and completion content.
ViewGitHub-style contribution heatmap with month and weekday labels, tooltips, configurable intensity scale and a legend.
ViewTanStack-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.
ViewCompact metric card with a value and unit, a tone-aware sparkline and an up / down trend line. Compound API.
ViewBoard of columns and cards with pointer and keyboard drag-and-drop across columns, drop placeholder, empty-column hint and live-region announcements. No dnd-kit.
ViewTiny inline SVG chart in line, area or bar form with optional curve, last-point dot, reference line and hover tooltip. Tints with currentColor, no chart library.
View3D tactile keycap with hover lift and pressed states. Compound API with KbdGroup for chords and KbdDisplay for inline keys.
ViewMDX-style admonition with info / success / warning / error / neutral variants and optional icon override. Ships --info / --success / --warning theme tokens.
ViewFixed reading progress bar. Tracks document scroll by default or a scoped container ref.
ViewTop-of-page banner with default / primary / muted tones, optional dismiss button and localStorage persistence.
ViewLoading indicator with circle, dots and bars variants, sm / md / lg sizes. Inherits the current text color and ships an accessible status label.
ViewClick-to-copy button with copied feedback, icon-only or labelled, ghost / outline variants and a non-secure-context clipboard fallback.
ViewIsometric stack of plates with an icon skewed onto the front face, for feature headers and empty states. Layer count is a prop, and the plates take their color from the surrounding text.
ViewInfinite scrolling row or column for logos and testimonials, with pause-on-hover, reverse and vertical modes. Keyframes ship inline, zero config.
ViewBefore/after comparison slider with a draggable, keyboard-accessible divider, horizontal or vertical orientation and hover-follow mode.
ViewFullscreen image lightbox on Radix Dialog with gallery navigation, zoom and pan, swipe gestures, captions and a thumbnail strip.
ViewDependency-free QR code generator rendering crisp SVG, with L/M/Q/H error correction, quiet-zone control and currentColor theming.
ViewCode display with built-in dependency-free syntax highlighting via theme tokens, line numbers, line highlights, diff gutters, copy button and collapsible max-height.
ViewTrue masonry layout that balances children into the shortest column by measured height, order-preserving, responsive, dependency-free.
ViewComposable audio player with play/pause, scrub-safe seek with buffered tint, skip, time readouts, volume and playback rate.
ViewImperative 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.
ViewUnsaved-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.
ViewCollapsible JSON tree with typed value colors, item counts on closed nodes, long-string truncation, expand or collapse all, copy, and arrow-key navigation.
ViewLine diff of two texts computed in-component with an LCS algorithm. Unified or split layout, +N / -N stats, context lines with expandable gaps. No deps.
ViewReveals content with a blur, fade and lift as it scrolls into view. Configurable delay, duration and threshold; respects reduced-motion.
ViewStaggered text entrance that masks and slides each word, character or line into place on scroll. Respects reduced-motion.
ViewFades and slides content in from any direction as it enters the viewport. Configurable distance, delay and replay; respects reduced-motion.
ViewCard surface with a soft spotlight that tracks the cursor and fades in on hover. Built on design tokens, no hard-coded colors.
ViewButton that pulls toward the cursor and springs back on leave. Adjustable strength, asChild to wrap a link, respects reduced-motion.
ViewAmbient glow layer that follows the pointer across its container and fades when it leaves. Drop it behind heroes, grids or feature panels.
ViewCanvas particle field that drifts and twinkles behind any container. Density scales with size, colors resolve from tokens, and it pauses offscreen and under reduced-motion. No dependencies.
View3D pointer tilt with optional cursor-following glare and configurable max angle, scale and perspective. Respects reduced-motion.
ViewA trigger card that morphs into a centered dialog via shared-layout animation, with focus trapping, scroll lock, Esc to close and reduced-motion support.
ViewMulti-step progress indicator with horizontal and vertical orientation, completed / active / inactive states, clickable steps and a compound API.
ViewOnboarding spotlight that dims the page around a target element and walks users through steps with a positioned coach-mark card.
ViewmacOS-style dock with cursor magnification: icons scale and spring as the pointer passes, with hover and focus labels. Built on motion.
ViewExpanding speed-dial FAB: a primary trigger that rotates open to stagger a stack of secondary actions on any side. Compound API.
ViewFloating pill toolbar for text selection and canvas actions, with toggle buttons, separators and labels. Position it anywhere.
ViewTwo-pane master/detail layout with a draggable divider, keyboard resize, min/max bounds and horizontal or vertical orientation. RTL-aware.
ViewComposable resizable panel groups with draggable, keyboard-accessible handles, per-panel minimums and nestable horizontal or vertical groups. RTL-aware.
ViewOn-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.
ViewEvery 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/multi-select"
<MultiSelect value={value} onValueChange={setValue} options={options}>
<MultiSelectTrigger placeholder="Pick…" />
<MultiSelectContent searchPlaceholder="Filter…" />
</MultiSelect>