Motion review approved
4mThe pull request is ready to merge.
87 animated React components with live inline previews
Every component from beui.dev with interactive previews. Install via shadcn CLI.
Free, open-source animated React components built with Motion and Tailwind CSS, available as copy-paste source through the shadcn registry.
Composable color swatches with a spring-gliding selection ring, press feedback, native radio keyboard navigation, and controlled or uncontrolled state.
pnpm dlx shadcn@latest add @beui/color-selectorComposable breadcrumb navigation with soft path transitions, a hoverable overflow dropdown for long trails, custom separators, and router-link support.
pnpm dlx shadcn@latest add @beui/breadcrumb3D perspective tilt on hover with cursor-tracked glare.
pnpm dlx shadcn@latest add @beui/tilt-cardSpring-pressed Button plus StatefulButton, MagneticButton, and MetallicButton variants.
pnpm dlx shadcn@latest add @beui/buttonExpressive call-to-action buttons with expanding, hold, and slide interactions.
pnpm dlx shadcn@latest add @beui/expanding-arrow-buttonClick-to-expand button and chip controls that reveal a label or trailing action through spring layout continuity.
pnpm dlx shadcn@latest add @beui/expandable-controlComposable numeric stepper whose fixed footprint adapts at its minimum and maximum while the value rolls between steps.
pnpm dlx shadcn@latest add @beui/adaptive-stepperInfinite horizontal or vertical scroll with pause-on-hover.
pnpm dlx shadcn@latest add @beui/marqueePill, segment or underline tabs with a spring layoutId indicator.
pnpm dlx shadcn@latest add @beui/tabsToggle with a spring-driven thumb and press feedback.
pnpm dlx shadcn@latest add @beui/switchText input with label, left/right icons, optional stable error row, error shake and success check draw.
pnpm dlx shadcn@latest add @beui/inputComposable select primitives whose panel bouncily unfolds out of the trigger and separates, plus a Morph variant where the trigger grows into the panel via shared layout.
pnpm dlx shadcn@latest add @beui/selectSearchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.
pnpm dlx shadcn@latest add @beui/comboboxComposable multi-select primitives with searchable options, removable animated tokens, and a morphing collision-aware panel.
pnpm dlx shadcn@latest add @beui/multi-selectForm choice control with a draw-on checkmark, spring press feedback and indeterminate state support.
pnpm dlx shadcn@latest add @beui/checkboxSingle-select choice control with a gliding layoutId indicator dot and spring press feedback.
pnpm dlx shadcn@latest add @beui/radioVaul-inspired draggable bottom sheet with snap points, inertia and glass surface.
pnpm dlx shadcn@latest add @beui/bottom-sheetNative-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
pnpm dlx shadcn@latest add @beui/pull-to-refreshA pill that glides between hovered items via motion's shared layout, with blur enter/exit.
pnpm dlx shadcn@latest add @beui/shared-layout-bgA vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.
pnpm dlx shadcn@latest add @beui/bounce-sidebarA composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and becomes a focus-managed sheet on mobile.
pnpm dlx shadcn@latest add @beui/animated-sidebarComposable file and folder primitives with springing branches, a gliding selection, and complete keyboard navigation.
pnpm dlx shadcn@latest add @beui/file-treeCodex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
pnpm dlx shadcn@latest add @beui/preview-railmacOS-style dock with grouped actions and a gliding active pill.
pnpm dlx shadcn@latest add @beui/dockHover or focus tooltip with a subtle scale and fade, collision-aware placement, and optional cursor tracking.
pnpm dlx shadcn@latest add @beui/tooltipComposable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard navigation, typeahead, and long-press support.
pnpm dlx shadcn@latest add @beui/context-menuGooey popover whose panel oozes out of the trigger through an SVG goo filter — a liquid neck that stretches and pinches — with crisp content fading in on top, plus a Morph variant that clip-morphs open from the trigger corner. Click or hover trigger, controlled or uncontrolled.
pnpm dlx shadcn@latest add @beui/popoverFamily-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.
Click a row. The modal morphs height to match new content.
pnpm dlx shadcn@latest add @beui/morphing-modalA 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.
pnpm dlx shadcn@latest add @beui/center-morph-modalAnimated text primitives for spring reveals, chromatic sweeps, shimmer loading states, letter-cascade swaps and character scrambles.
pnpm dlx shadcn@latest add @beui/text-animationAnimated number primitives for count-up values, rolling tickers, and fixed-slot digit swaps.
pnpm dlx shadcn@latest add @beui/numberStatus badge with animated state icons, pulse feedback and compact size variants.
pnpm dlx shadcn@latest add @beui/animated-badgeCTA button and slot primitives for swapping text and icons with blur motion.
pnpm dlx shadcn@latest add @beui/action-swapStacked toasts with status morphs, swipe dismissal, actions and layout-aware motion.
pnpm dlx shadcn@latest add @beui/animated-toast-stackTheme 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 like a shutter.
pnpm dlx shadcn@latest add @beui/theme-toggleSingle-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.
pnpm dlx shadcn@latest add @beui/bouncy-accordionSide panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
pnpm dlx shadcn@latest add @beui/drawerScroll-driven motion: a Lenis smooth-scroll provider and a reading-progress indicator that reads from it.
Collection component
pnpm dlx shadcn@latest add @beui/scroll-animationSlider with tick dots and a vertical-bar thumb that bounces as it lands on each step. Drag or keyboard, reduced-motion safe.
pnpm dlx shadcn@latest add @beui/range-slideriOS-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 date and time pickers, reduced-motion safe.
pnpm dlx shadcn@latest add @beui/wheel-pickerVirtualized data table that stays smooth at 10k+ rows, with sortable headers, row selection, column resize and reorder, and a sticky header. Minimal, reduced-motion-safe motion.
pnpm dlx shadcn@latest add @beui/tableCanvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.
pnpm dlx shadcn@latest add @beui/shader-backgroundA 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 springy glide and snap. Reduced-motion drops the glide.
pnpm dlx shadcn@latest add @beui/cylinder-carouselLoading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five terminal-style ascii spinners. Scales from one size prop, uses currentColor, and reduced-motion swaps every transform for a calm opacity pulse.
pnpm dlx shadcn@latest add @beui/loaderAnimated React charts for activity, returns, price targets, and order books, built with Motion and Tailwind CSS as customizable copy-paste source.
Stacked bar and area shares with period tooltips and a compact interactive legend.
pnpm dlx shadcn@latest add @beui/composition-chartVertical and horizontal funnels with curved stages and animated number tooltips.
pnpm dlx shadcn@latest add @beui/funnel-chartAnimated liquidity bands across price and time, with a price trace and depth tooltips.
pnpm dlx shadcn@latest add @beui/liquidity-heatmapAnimated rankings with curved paths, interactive rank dots, and tooltips.
pnpm dlx shadcn@latest add @beui/bump-chartAnimated order book with bid and ask depth, spread, and volume balance.
pnpm dlx shadcn@latest add @beui/order-bookComposable activity calendar with Grid, Legend, and Tooltip parts, controlled range selection, and UTC calendar dates. Supply weekly intensities to visualize activity and total a selected span.
pnpm dlx shadcn@latest add @beui/heat-calendarComposable monthly returns calendar with Grid and Tooltip parts, controlled month or year selections, and compounded totals. Supply your own years and monthly percentages.
pnpm dlx shadcn@latest add @beui/returns-calendarComposable price target chart with Header, Plot, SVG, Axes, History, Targets, Now, Cursor, and Tooltip parts. Supply dated price history and targets; scrub with a pointer or keyboard and customize the active readout.
pnpm dlx shadcn@latest add @beui/price-target-fanAnimated React components for agent reasoning, progress, tool activity, and conversational AI interfaces.
A focused conversational surface with visual tones, independent alignment, grouped messages, expandable content, and interactive link or button support.
pnpm dlx shadcn@latest add @beui/message-bubbleComposable conversation primitives for message rows, grouped bubbles, avatars, metadata, live markers, and a mount-only trailing-edge pop-up for newly sent rows.
pnpm dlx shadcn@latest add @beui/messageA reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.
pnpm dlx shadcn@latest add @beui/message-scrollerAn auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
pnpm dlx shadcn@latest add @beui/prompt-inputA collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.
pnpm dlx shadcn@latest add @beui/todo-listA syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
pnpm dlx shadcn@latest add @beui/code-blockA human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.
Collection component
pnpm dlx shadcn@latest add @beui/approval-cardA syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
pnpm dlx shadcn@latest add @beui/file-diffA lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.
Collection component
pnpm dlx shadcn@latest add @beui/tool-resultA stable response surface with completion actions, rendered content, and an expandable source summary.
pnpm dlx shadcn@latest add @beui/streaming-responseA stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.
pnpm dlx shadcn@latest add @beui/image-generationA human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.
pnpm dlx shadcn@latest add @beui/tool-approvalInline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.
pnpm dlx shadcn@latest add @beui/citationsOne adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.
pnpm dlx shadcn@latest add @beui/agent-activityThree thoughtful loading states for AI interfaces: shimmering status text, live agent progress, and cycling reasoning phrases.
Collection component
pnpm dlx shadcn@latest add @beui/loading-statesA collapsible AI workspace sidebar for folders, projects, files, and bookmarks with keyboard navigation, optimistic moves, inline rename, and overflow-aware labels.
pnpm dlx shadcn@latest add @beui/ai-sidebarA complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.
pnpm dlx shadcn@latest add @beui/chat-appProduct-ready animated React UI blocks built with Motion and Tailwind CSS, available as customizable copy-paste source.
Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.
pnpm dlx shadcn@latest add @beui/infinite-masonryCompact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.
pnpm dlx shadcn@latest add @beui/notification-stackAn 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.
pnpm dlx shadcn@latest add @beui/project-folderA 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 visibility plus a separate overflow action.
pnpm dlx shadcn@latest add @beui/card-folderAnimated tournament fixtures in two styles: a knockout bracket that pages through rounds, and a wheel that wraps the same tree around the champion. Both read the same array of rounds, so one dataset draws either.
pnpm dlx shadcn@latest add @beui/knockout-bracketWeekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrollable dropdown, and a copy menu clones hours to other days.
pnpm dlx shadcn@latest add @beui/availability-schedulerCross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.
pnpm dlx shadcn@latest add @beui/swapiOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.
pnpm dlx shadcn@latest add @beui/dynamic-island⌘K palette with fuzzy filter, spring-animated active row and glass surface.
pnpm dlx shadcn@latest add @beui/command-paletteSearch field or compact icon that morphs into a glass results surface, whether opened by click or keyboard shortcut.
pnpm dlx shadcn@latest add @beui/morphing-searchCompact icon actions that expand into labeled controls on hover or focus with shared layout motion.
pnpm dlx shadcn@latest add @beui/expandable-action-barConnected pill rail for primary actions that springs open to reveal extra controls.
pnpm dlx shadcn@latest add @beui/overflow-actionsIcon 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.
pnpm dlx shadcn@latest add @beui/expandable-tabsReorderable tabs whose selected item grows into a white content surface, with the active shape gliding as tabs move and a shared morph between rooms.
pnpm dlx shadcn@latest add @beui/morphing-tabsMobile-style list rows that swipe left or right to reveal contextual action buttons.
pnpm dlx shadcn@latest add @beui/swipeable-listTwo file upload patterns: an attachment workspace for mixed files, links, audio and media, plus a progress queue with retry and removal.
pnpm dlx shadcn@latest add @beui/file-uploadAnimated market listing cards with outcome CTAs, probabilities and bookmarks, plus a trade ticket with buy/sell modes and rolling amount entry.
pnpm dlx shadcn@latest add @beui/prediction-marketWallet 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, copy-address, and Send / Deposit / Swap / Buy actions.
pnpm dlx shadcn@latest add @beui/wallet-cardOne-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.
pnpm dlx shadcn@latest add @beui/otp-inputComposed 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 an animated submit lifecycle.
pnpm dlx shadcn@latest add @beui/signup-formA button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items.
pnpm dlx shadcn@latest add @beui/bloom-menuCorner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.
pnpm dlx shadcn@latest add @beui/feedback-widgetAnimated 404 pages in five styles: glitch scramble, magnetic digits, cursor spotlight, a fanning card stack and a typed terminal.
Collection component
pnpm dlx shadcn@latest add @beui/not-foundMove your cursor across the card to see 3D tilt + glare.
Hover over these buttons with a mouse to see the magnetic effect
Hover to see the chrome shimmer effect
Workspace
Activity
Pull down to check for updates
Motion review approved
4mThe pull request is ready to merge.
New component feedback
18mThe spring feels much closer to native now.
Registry checks passed
31mAll component files resolved successfully.
Preview deployed
1hThe latest build is ready to inspect.
Docs comment resolved
2hThe usage example now covers async refreshes.
Hover or focus. Press Esc to dismiss.
Active users
48,273Open a real toast
Toasts render fixed on the screen. Change position to open a toast from that edge.
Email | Status |
|---|
Drag, scroll or use arrow keys to roll
Product conversion · Sample cohorts
Inspect a stage to see conversion and drop-off
SOL / USD · Simulated depth
| 14:00 | 14:02 | 14:04 | 14:06 | 14:08 | 14:10 | 14:12 | 14:14 | 14:16 | 14:18 | 14:20 | 14:22 | 14:24 | 14:26 | 14:28 | 14:30 | 14:32 | 14:34 | 14:36 | 14:38 | 14:40 | 14:42 | 14:44 | 14:46 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Brighter bands hold more liquidity · White line tracks price
Five products. Six months. Every move.
| Series | Apr | May | Jun | Jul | Aug | Sep |
|---|---|---|---|---|---|---|
| Studio | 4 | 3 | 2 | 3 | 2 | 1 |
| Canvas | 1 | 1 | 3 | 2 | 1 | 2 |
| Layers | 3 | 2 | 1 | 1 | 3 | 3 |
| Orbit | 2 | 4 | 5 | 4 | 5 | 4 |
| Frame | 5 | 5 | 4 | 5 | 4 | 5 |
Inspect a dot for details · Select to pin a product
| Price USD | Size SOL | Cumulative total SOL |
|---|---|---|
| 247.20 | 782 | 8.6K |
| 247.05 | 1.2K | 7.8K |
| 246.90 | 1.1K | 6.6K |
| 246.75 | 2.2K | 5.5K |
| 246.60 | 1.8K | 3.3K |
| 246.45 | 278 | 1.5K |
| 246.30 | 363 | 1.2K |
| 246.15 | 574 | 858 |
| 246.00 | 284 | 284 |
| Price USD | Size SOL | Cumulative total SOL |
|---|---|---|
| 245.70 | 194 | 194 |
| 245.55 | 543 | 737 |
| 245.40 | 314 | 1.1K |
| 245.25 | 592 | 1.6K |
| 245.10 | 715 | 2.4K |
| 244.95 | 744 | 3.1K |
| 244.80 | 789 | 3.9K |
| 244.65 | 735 | 4.6K |
| 244.50 | 1.1K | 5.7K |
“a quiet mountain landscape at sunset”
The agent wants to run the project test suite in the current workspace.
bun test tests/a11y.test.tsxVisual index
Scroll to load the next page
12 items
Canada0
Morocco3
Paraguay0
France1
USA1
Belgium4
Portugal0
Spain1
Brazil1
Norway2
Mexico2
England3
Switzerland0 (4)
Colombia0 (3)
Argentina3
Egypt2
France2
Morocco0
Spain2
Belgium1
Norway1
England2
Argentina3
Switzerland1
France
Spain
England
ArgentinaThird place play-off
≈ $3,142
≈ $3,142
Press ⌘ J (or Ctrl J) to open.
quiet focus
A small space for the work that needs a little more air around it.
Priority queue
Ready
Upload package
1 of 3 files ready
brand-assets.zip
ZIP · 18 MB
release-cut.mov
MOV · 80 MB
vendor-contract.pdf
PDF · 2.7 MB · Connection lost
Avg. Price 16.7¢
Balance
Enter 123456 to verify.