sh4dcnv2 · atlas
← libraries

@beui

Bespoke motion components for React. Copy-paste components with shadcn-compatible installs, Tailwind CSS v4, and Motion.

124 components pro available react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://beui.dev/r/registry.json
pnpm pnpm dlx shadcn@latest add https://beui.dev/r/registry.json
bun bunx shadcn@latest add https://beui.dev/r/registry.json
fetch registry curl -s https://beui.dev/r/registry.json

Components

124 total
Tilt Card component

3D perspective tilt on hover with cursor-tracked glare.

npx shadcn@latest add https://beui.dev/r/tilt-card.json
Button Metallic Button component

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
Button Button component

Press scale, hover lift, variants and sizes.

npx shadcn@latest add https://beui.dev/r/button-base.json
Button Stateful Button component

Idle → loading → success / error with blur-swap slots and morphing width.

npx shadcn@latest add https://beui.dev/r/button-stateful.json
Button Magnetic Button component

Button composed with the Magnetic wrapper for cursor-attracted pull.

npx shadcn@latest add https://beui.dev/r/button-magnetic.json
Animated CTA Buttons Expanding Arrow Button component

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
Animated CTA Buttons Hold Action Button component

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
Animated CTA Buttons Slide Action Button component

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
Expandable Control component

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
Adaptive Stepper component

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
Marquee component

Infinite horizontal or vertical scroll with pause-on-hover.

npx shadcn@latest add https://beui.dev/r/marquee.json
Tabs component

Pill, segment or underline tabs with a spring layoutId indicator.

npx shadcn@latest add https://beui.dev/r/tabs.json
Switch component

Toggle with a spring-driven thumb and press feedback.

npx shadcn@latest add https://beui.dev/r/switch.json
Input component

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
Select Select component

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
Select Morph Select component

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
Combobox component

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
Multi Select component

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
Checkbox component

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
Radio Group component

Single-select choice control with a gliding layoutId indicator dot and spring press feedback.

npx shadcn@latest add https://beui.dev/r/radio.json
Bottom Sheet component

Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.

npx shadcn@latest add https://beui.dev/r/bottom-sheet.json
Pull to Refresh component

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
Shared Layout Background component

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
Bounce Sidebar component

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
Animated Sidebar component

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
File Tree component

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
Preview Rail component

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
Dock component

macOS-style dock with grouped actions and a gliding active pill.

npx shadcn@latest add https://beui.dev/r/dock.json
Tooltip component

Hover or focus tooltip with blur enter/exit and spring spawn.

npx shadcn@latest add https://beui.dev/r/tooltip.json
Animated Context Menu component

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
Popover Gooey Popover component

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
Popover Morph Popover component

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
Morphing Modal component

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
Center Morph Modal component

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
Text Animation Text Scramble component

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
Text Animation Dia Text Animation component

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
Text Animation Text Reveal component

Word or character reveal with spring slide-up and blur.

npx shadcn@latest add https://beui.dev/r/text-reveal.json
Text Animation Text Shimmer component

Gradient sweep across text for loading or emphasis.

npx shadcn@latest add https://beui.dev/r/text-shimmer.json
Text Animation Text Cascade component

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
Number Animation Digit Swap component

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
Number Animation Number Ticker component

Slot-machine rolling digits with staggered entry.

npx shadcn@latest add https://beui.dev/r/number-ticker.json
Number Animation Animated Number component

Spring-driven count-up triggered when in view.

npx shadcn@latest add https://beui.dev/r/animated-number.json
Animated Badge component

Status badge with animated state icons, pulse feedback and compact size variants.

npx shadcn@latest add https://beui.dev/r/animated-badge.json
Action Swap Cascade component

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
Action Swap Blur component

Copy-button style swap with blur, opacity and scale.

npx shadcn@latest add https://beui.dev/r/action-swap-blur.json
Action Swap Roll component

The next text or icon rolls in from below with blur.

npx shadcn@latest add https://beui.dev/r/action-swap-roll.json
Animated Toast Stack component

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 component

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
Bouncy Accordion component

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
Drawer component

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
Scroll Animation Smooth Scroll component

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
Scroll Animation Scroll Progress component

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
Scroll Animation Parallax component

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
Scroll Animation Scroll To component

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
Scroll Animation Scroll Reveal component

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
Range Slider Inline Slider component

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
Range Slider Range Slider component

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
Range Slider Fluid Slider component

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
Range Slider Wave Slider component

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
Range Slider Bubble Slider component

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
Range Slider Ruler Slider component

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
Wheel Picker component

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
Table Data Table component

10k virtualized rows with sortable headers, row selection, column resize and reorder.

npx shadcn@latest add https://beui.dev/r/table.json
Table Editable Table component

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
Table Async Table component

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
Shader Background component

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
Cylinder Carousel component

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
Loader component

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
Funnel Chart component

Vertical and horizontal funnels with curved stages and animated number tooltips.

npx shadcn@latest add https://beui.dev/r/funnel-chart.json
Liquidity Heatmap component

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
Bump Chart component

Animated rankings with curved paths, interactive rank dots, and tooltips.

npx shadcn@latest add https://beui.dev/r/bump-chart.json
Order Book component

Animated order book with bid and ask depth, spread, and volume balance.

npx shadcn@latest add https://beui.dev/r/order-book.json
Heat Calendar component

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
Returns Calendar component

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
Price Target Fan component

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
Message Bubble component

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
Message component

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
Message Scroller component

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
Prompt Input component

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
Todo List component

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
Code Block component

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
Approval Card component

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
File Diff component

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
Tool Result component

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
Streaming Response component

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
Image Generation component

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
Tool Approval component

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
Citations component

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
Agent Activity component

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
Agent Loading States Reasoning Text component

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
Agent Loading States Thinking Shimmer component

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
Agent Loading States Agent Progress component

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
AI Sidebar component

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
Chat App component

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
Infinite Masonry block

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
Notification Stack block

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
Project Folder block

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
Card Folder block

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
Fixtures Knockout Wheel block

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
Fixtures Knockout Bracket block

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
Availability Scheduler block

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
Multi-chain Swap block

Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.

npx shadcn@latest add https://beui.dev/r/swap.json
Dynamic Island block

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
Command Palette block

⌘K palette with fuzzy filter, spring-animated active row and glass surface.

npx shadcn@latest add https://beui.dev/r/command-palette.json
Morphing Search block

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
Expandable Action Bar block

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
Overflow Actions block

Connected pill rail for primary actions that springs open to reveal extra controls.

npx shadcn@latest add https://beui.dev/r/overflow-actions.json
Expandable Tabs block

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
Morphing Tabs block

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
Swipeable List block

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
File Upload Attachment Upload block

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
File Upload Upload Queue block

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
Prediction Market Market Cards block

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
Prediction Market Trade Ticket block

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 Card block

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
OTP Input block

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
Sign Up Form block

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
Bloom Menu block

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
Feedback Widget block

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
404 / Not Found Glitch block

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
404 / Not Found Magnetic block

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
404 / Not Found Spotlight block

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
404 / Not Found Stacked block

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
404 / Not Found Terminal block

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