@beui
Bespoke motion components for React. Copy-paste components with shadcn-compatible installs, Tailwind CSS v4, and Motion.
Install this registry
npx shadcn@latest add https://beui.dev/r/registry.json pnpm dlx shadcn@latest add https://beui.dev/r/registry.json bunx shadcn@latest add https://beui.dev/r/registry.json curl -s https://beui.dev/r/registry.json Components
124 total3D perspective tilt on hover with cursor-tracked glare.
npx shadcn@latest add https://beui.dev/r/tilt-card.json A neutral button surface framed by a pronounced chrome rim with a straight traveling reflection.
npx shadcn@latest add https://beui.dev/r/button-metallic.json Press scale, hover lift, variants and sizes.
npx shadcn@latest add https://beui.dev/r/button-base.json Idle → loading → success / error with blur-swap slots and morphing width.
npx shadcn@latest add https://beui.dev/r/button-stateful.json Button composed with the Magnetic wrapper for cursor-attracted pull.
npx shadcn@latest add https://beui.dev/r/button-magnetic.json An accent tile that expands into a dotted-arrow trail on hover or focus.
npx shadcn@latest add https://beui.dev/r/expanding-arrow-button.json Hold to complete with a vertical or horizontal liquid fill; release early to cancel.
npx shadcn@latest add https://beui.dev/r/hold-action-button.json Drag the thumb to the end to confirm an action; release early to spring back.
npx shadcn@latest add https://beui.dev/r/slide-action-button.json Click-to-expand button and chip controls that reveal a label or trailing action through spring layout continuity.
npx shadcn@latest add https://beui.dev/r/expandable-control.json Composable numeric stepper whose fixed footprint adapts at its minimum and maximum while the value rolls between steps.
npx shadcn@latest add https://beui.dev/r/adaptive-stepper.json Infinite horizontal or vertical scroll with pause-on-hover.
npx shadcn@latest add https://beui.dev/r/marquee.json Pill, segment or underline tabs with a spring layoutId indicator.
npx shadcn@latest add https://beui.dev/r/tabs.json Toggle with a spring-driven thumb and press feedback.
npx shadcn@latest add https://beui.dev/r/switch.json Text input with label, left/right icons, optional stable error row, error shake and success check draw.
npx shadcn@latest add https://beui.dev/r/input.json Composable primitives (Select, SelectTrigger, SelectValue, SelectContent, SelectItem); the panel pinches off the trigger and separates, with staggered items. P…
npx shadcn@latest add https://beui.dev/r/select.json Composable primitives (MorphSelect, MorphSelectTrigger, MorphSelectValue, MorphSelectContent, MorphSelectItem) where the trigger morphs into the panel via a sh…
npx shadcn@latest add https://beui.dev/r/select-morph.json Searchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.
npx shadcn@latest add https://beui.dev/r/combobox.json Composable multi-select primitives with searchable options, removable animated tokens, and a morphing collision-aware panel.
npx shadcn@latest add https://beui.dev/r/multi-select.json Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.
npx shadcn@latest add https://beui.dev/r/checkbox.json Single-select choice control with a gliding layoutId indicator dot and spring press feedback.
npx shadcn@latest add https://beui.dev/r/radio.json Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
npx shadcn@latest add https://beui.dev/r/bottom-sheet.json Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
npx shadcn@latest add https://beui.dev/r/pull-to-refresh.json A pill that glides between hovered items via motion's shared layout, with blur enter/exit.
npx shadcn@latest add https://beui.dev/r/shared-layout-bg.json A vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.
npx shadcn@latest add https://beui.dev/r/bounce-sidebar.json A composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and becomes a focus-managed sheet on mobile.
npx shadcn@latest add https://beui.dev/r/animated-sidebar.json Composable file and folder primitives with springing branches, a gliding selection, and complete keyboard navigation.
npx shadcn@latest add https://beui.dev/r/file-tree.json Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
npx shadcn@latest add https://beui.dev/r/preview-rail.json macOS-style dock with grouped actions and a gliding active pill.
npx shadcn@latest add https://beui.dev/r/dock.json Hover or focus tooltip with blur enter/exit and spring spawn.
npx shadcn@latest add https://beui.dev/r/tooltip.json Composable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard navigation, typeahead, and long…
npx shadcn@latest add https://beui.dev/r/context-menu.json Composable Popover, PopoverTrigger, PopoverContent; the panel oozes out of the trigger through an SVG goo filter with a liquid neck, crisp content fading in on…
npx shadcn@latest add https://beui.dev/r/popover.json Composable MorphPopover, MorphPopoverTrigger, MorphPopoverContent; the panel is laid out full size but clipped to the corner nearest the trigger, then unclips …
npx shadcn@latest add https://beui.dev/r/popover-morph.json Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.
npx shadcn@latest add https://beui.dev/r/morphing-modal.json A composable modal whose full-size surface unfolds from its exact center toward every edge, then folds back the same way with an inset close control.
npx shadcn@latest add https://beui.dev/r/center-morph-modal.json A controlled character scramble that resolves changed text while keeping its final value accessible.
npx shadcn@latest add https://beui.dev/r/text-scramble.json A Dia-inspired text effect with a fixed sentence prefix and a cycling final word revealed by a colorful sweep.
npx shadcn@latest add https://beui.dev/r/chromatic-text-reveal.json Word or character reveal with spring slide-up and blur.
npx shadcn@latest add https://beui.dev/r/text-reveal.json Gradient sweep across text for loading or emphasis.
npx shadcn@latest add https://beui.dev/r/text-shimmer.json Letter-by-letter slot roll for standalone text — old letters drop away as new ones land, left to right.
npx shadcn@latest add https://beui.dev/r/text-cascade.json Fixed-slot digits and mask glyphs that roll on change with controllable direction, stagger, replay, and suffix emphasis.
npx shadcn@latest add https://beui.dev/r/digit-swap.json Slot-machine rolling digits with staggered entry.
npx shadcn@latest add https://beui.dev/r/number-ticker.json Spring-driven count-up triggered when in view.
npx shadcn@latest add https://beui.dev/r/animated-number.json Status badge with animated state icons, pulse feedback and compact size variants.
npx shadcn@latest add https://beui.dev/r/animated-badge.json Letter-by-letter slot roll — the old label's letters drop away as the new ones land, left to right.
npx shadcn@latest add https://beui.dev/r/action-swap-cascade.json Copy-button style swap with blur, opacity and scale.
npx shadcn@latest add https://beui.dev/r/action-swap-blur.json The next text or icon rolls in from below with blur.
npx shadcn@latest add https://beui.dev/r/action-swap-roll.json Stacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
npx shadcn@latest add https://beui.dev/r/animated-toast-stack.json Theme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path reveal, or slats that open across the screen…
npx shadcn@latest add https://beui.dev/r/theme-toggle.json Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
npx shadcn@latest add https://beui.dev/r/bouncy-accordion.json Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
npx shadcn@latest add https://beui.dev/r/drawer.json Smooth-scroll provider over Lenis with a useSmoothScroll hook exposing scroll offset, progress and velocity. Reduced-motion safe.
npx shadcn@latest add https://beui.dev/r/smooth-scroll.json Reading-progress indicator — fixed bar or circular ring — driven by scroll position via useSmoothScroll, with spring smoothing.
npx shadcn@latest add https://beui.dev/r/scroll-progress.json Wrapper that drifts its children at a speed factor as they cross the viewport, on either axis. Reduced-motion safe.
npx shadcn@latest add https://beui.dev/r/parallax.json Button that smooth-scrolls to a target (offset, selector or element) via the active SmoothScroll provider; reduced-motion jumps instantly.
npx shadcn@latest add https://beui.dev/r/scroll-to.json Reveals its children with a spring slide and blur as they enter the viewport, once or every time. Reduced-motion keeps a fade.
npx shadcn@latest add https://beui.dev/r/scroll-reveal.json An inset fill and inline label and value. Ten evenly spaced stops span the track; markers under text stay hidden but remain interactive, and the thumb parts ar…
npx shadcn@latest add https://beui.dev/r/range-slider-inline.json Tick dots, and a vertical-bar thumb that bounces as it lands on each step.
npx shadcn@latest add https://beui.dev/r/range-slider.json No thumb. The fill slides behind a rounded liquid cap, and the label flips color wherever the fill covers it.
npx shadcn@latest add https://beui.dev/r/range-slider-fluid.json Equalizer bars peak around the handle and drop back once it passes, so the value moves down the track as a wave.
npx shadcn@latest add https://beui.dev/r/range-slider-wave.json Grab the thumb and a value bubble pops out of it. The bubble tilts and squashes with how fast you drag, then settles upright.
npx shadcn@latest add https://beui.dev/r/range-slider-bubble.json The needle stays put and the scale scrolls under it. A flick keeps going and settles on the nearest tick. Fractional steps read at the step's own precision.
npx shadcn@latest add https://beui.dev/r/range-slider-ruler.json iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control. Composes side by side for d…
npx shadcn@latest add https://beui.dev/r/wheel-picker.json 10k virtualized rows with sortable headers, row selection, column resize and reorder.
npx shadcn@latest add https://beui.dev/r/table.json Edit cells inline and insert or delete rows and columns via border handles; the table re-renders from the updated data and column defs.
npx shadcn@latest add https://beui.dev/r/table-editable.json Loads pages on demand — skeleton rows on first load, then infinite scroll via onEndReached as the virtualized list nears the bottom.
npx shadcn@latest add https://beui.dev/r/table-async.json Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated va…
npx shadcn@latest add https://beui.dev/r/shader-background.json A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a sprin…
npx shadcn@latest add https://beui.dev/r/cylinder-carousel.json Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five termina…
npx shadcn@latest add https://beui.dev/r/loader.json Vertical and horizontal funnels with curved stages and animated number tooltips.
npx shadcn@latest add https://beui.dev/r/funnel-chart.json Animated liquidity bands across price and time, with a price trace and depth tooltips.
npx shadcn@latest add https://beui.dev/r/liquidity-heatmap.json Animated rankings with curved paths, interactive rank dots, and tooltips.
npx shadcn@latest add https://beui.dev/r/bump-chart.json Animated order book with bid and ask depth, spread, and volume balance.
npx shadcn@latest add https://beui.dev/r/order-book.json Composable activity calendar with Grid, Legend, and Tooltip parts, controlled range selection, and UTC calendar dates. Supply weekly intensities to visualize a…
npx shadcn@latest add https://beui.dev/r/heat-calendar.json Composable monthly returns calendar with Grid and Tooltip parts, controlled month or year selections, and compounded totals. Supply your own years and monthly …
npx shadcn@latest add https://beui.dev/r/returns-calendar.json Composable price target chart with Header, Plot, SVG, Axes, History, Targets, Now, Cursor, and Tooltip parts. Supply dated price history and targets; scrub wit…
npx shadcn@latest add https://beui.dev/r/price-target-fan.json A focused conversational surface with visual tones, independent alignment, grouped messages, expandable content, and interactive link or button support.
npx shadcn@latest add https://beui.dev/r/message-bubble.json Composable conversation primitives for message rows, grouped bubbles, avatars, metadata, live markers, and a mount-only trailing-edge pop-up for newly sent row…
npx shadcn@latest add https://beui.dev/r/message.json A reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.
npx shadcn@latest add https://beui.dev/r/message-scroller.json An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
npx shadcn@latest add https://beui.dev/r/prompt-input.json A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.
npx shadcn@latest add https://beui.dev/r/todo-list.json A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
npx shadcn@latest add https://beui.dev/r/code-block.json A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.
npx shadcn@latest add https://beui.dev/r/approval-card.json A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
npx shadcn@latest add https://beui.dev/r/file-diff.json A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.
npx shadcn@latest add https://beui.dev/r/tool-result.json A stable response surface with completion actions, rendered content, and an expandable source summary.
npx shadcn@latest add https://beui.dev/r/streaming-response.json A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
npx shadcn@latest add https://beui.dev/r/image-generation.json A human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.
npx shadcn@latest add https://beui.dev/r/tool-approval.json Inline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.
npx shadcn@latest add https://beui.dev/r/citations.json One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.
npx shadcn@latest add https://beui.dev/r/agent-activity.json Shimmering reasoning copy with an ASCII loader and cascade, phrase-swap, or per-letter scramble transitions.
npx shadcn@latest add https://beui.dev/r/reasoning-text.json A quiet shimmer that keeps the agent's current status readable while work continues.
npx shadcn@latest add https://beui.dev/r/thinking-shimmer.json A compact activity glyph, action verb, and live tabular timer for longer-running agent work.
npx shadcn@latest add https://beui.dev/r/agent-progress.json A collapsible AI workspace sidebar for folders, projects, files, and bookmarks with keyboard navigation, optimistic moves, inline rename, and overflow-aware la…
npx shadcn@latest add https://beui.dev/r/ai-sidebar.json A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and promp…
npx shadcn@latest add https://beui.dev/r/chat-app.json Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
npx shadcn@latest add https://beui.dev/r/infinite-masonry.json Compact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.
npx shadcn@latest add https://beui.dev/r/notification-stack.json An interactive project folder that opens its file fan on hover or focus, expands into a focus-managed overlay, then retraces the complete path when closed.
npx shadcn@latest add https://beui.dev/r/project-folder.json A landscape card tucked into a stitched purse pocket that lifts forward as the purse compresses into its bottom seam, with controlled open and card-detail visi…
npx shadcn@latest add https://beui.dev/r/card-folder.json The tournament drawn radially. The champion holds the hub, each round is a ring further out, and the teams themselves form the rim. Nodes spring in ring by rin…
npx shadcn@latest add https://beui.dev/r/knockout-wheel.json Pages one round at a time. The leftmost round stacks at a fixed rhythm, each later round centers between its two feeder matches, and cards, elbow connectors, h…
npx shadcn@latest add https://beui.dev/r/knockout-bracket.json Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrol…
npx shadcn@latest add https://beui.dev/r/availability-scheduler.json Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.
npx shadcn@latest add https://beui.dev/r/swap.json iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.
npx shadcn@latest add https://beui.dev/r/dynamic-island.json ⌘K palette with fuzzy filter, spring-animated active row and glass surface.
npx shadcn@latest add https://beui.dev/r/command-palette.json Search field or compact icon that morphs into a glass results surface, whether opened by click or keyboard shortcut.
npx shadcn@latest add https://beui.dev/r/morphing-search.json Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.
npx shadcn@latest add https://beui.dev/r/expandable-action-bar.json Connected pill rail for primary actions that springs open to reveal extra controls.
npx shadcn@latest add https://beui.dev/r/overflow-actions.json Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.
npx shadcn@latest add https://beui.dev/r/expandable-tabs.json Reorderable tabs whose selected item grows into a white content surface, with the active shape gliding as tabs move and a shared morph between rooms.
npx shadcn@latest add https://beui.dev/r/morphing-tabs.json Mobile-style list rows that swipe left or right to reveal contextual action buttons.
npx shadcn@latest add https://beui.dev/r/swipeable-list.json A mixed attachment workspace with a dropzone, staggered file and image rows, animated upload, success, failure, retry and removal feedback, shared-layout image…
npx shadcn@latest add https://beui.dev/r/attachment-upload.json A drag-and-drop upload queue with progress rows, upload states, retry, and removal.
npx shadcn@latest add https://beui.dev/r/file-upload.json Compact market listings with consistent outcome rows, animated odds CTAs, payout multipliers and bookmarks. Odds CTAs use green/red backgrounds and roll into Y…
npx shadcn@latest add https://beui.dev/r/prediction-market-card.json Buy and sell outcomes with rolling amount entry, quick add chips and trade states.
npx shadcn@latest add https://beui.dev/r/prediction-market.json Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill and privacy toggle, c…
npx shadcn@latest add https://beui.dev/r/wallet-card.json One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.
npx shadcn@latest add https://beui.dev/r/otp-input.json Composed sign-up form that flags a field only once it is left, then clears the moment it is fixed, with a length-weighted strength meter, password reveal and a…
npx shadcn@latest add https://beui.dev/r/signup-form.json A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items.
npx shadcn@latest add https://beui.dev/r/bloom-menu.json Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.
npx shadcn@latest add https://beui.dev/r/feedback-widget.json Digits scramble through random glyphs before resolving, with a chromatic split on hover.
npx shadcn@latest add https://beui.dev/r/not-found-glitch.json Each digit is cursor-attracted via the Magnetic wrapper and springs back on leave.
npx shadcn@latest add https://beui.dev/r/not-found-magnetic.json A dark panel where a cursor-tracked spotlight reveals the bright code from a dim base.
npx shadcn@latest add https://beui.dev/r/not-found-spotlight.json A code card over a hidden stack that fans out with a spring on hover.
npx shadcn@latest add https://beui.dev/r/not-found-stacked.json A terminal window that types a failed cd command and a 404 status, with a blinking caret.
npx shadcn@latest add https://beui.dev/r/not-found-terminal.json