Motion-focused shadcn-compatible components, hooks, and blocks for polished React interfaces.
A shadcn Drawer that measures panel content and animates height changes.
An accessible switch with optional state labels, three sizes, and configurable motion.
A bottom-anchored shortcut menu that fans actions along a configurable arc while its trigger shrinks and swaps from a shortcut grid to a close icon.
A soft highlight briefly marks content when its value changes, then fades away without moving the layout.
A pure SVG checkmark animation that draws a square or circle before the check.
A scoped custom cursor for pointer-rich surfaces where each target can register its own label, icon, and interaction intent.
A shadcn Button-based clipboard control with animated copy and success states.
A screen whose resting card deck lifts to the top, drops the sheet away, and pulls a full page of detail up behind it, then swipes card by card.
A tabbed product demo with a shared playback timeline, progress underline, and customizable scenes. Includes three synchronized terminal-and-result examples.
A circular download action whose outline becomes the progress ring, then settles into a download-again arrow with a check badge. The done state can persist, reset, or hand off to a custom action, and downloads can be cancelable.
A shared-layout dialog that expands list items into an accessible detail view.
A floating panel that grows from a compact icon trigger and holds arbitrary content.
A Motion-powered segmented tab list for switching modes or views, with an active tab that expands from icon-only into a label.
A composable slider that stays expanded on mobile and grows from an icon button on desktop hover, focus, or drag.
A compact button that expands into an email form, with async submission, loading, confirmation, and error recovery.
A DynamicIsland-style toolbar whose icon tabs expand into actionable menu or content panels, with full keyboard and ARIA support.
A shadcn toggle button that expands from an icon into an icon-and-label action while keeping the icon anchored.
A controlled or uncontrolled toolbar primitive that measures its action slot and expands from either side.
A Motion-powered feedback popover that expands from a trigger, supports keyboard submission, and confirms receipt inline.
A horizontally scrollable multi-select tag row that groups selected tags first in selection order, with responsive controls and reduced-motion support.
A single-button floating select that expands into an animated option list.
A configurable floating action menu with coordinated size presets, a shrinking trigger, crossfading icon states, and staggered shortcuts.
A Motion-powered heartbeat primitive with a projected shadow layer and reduced-motion support.
A Motion-powered tab list with a shared highlight indicator and keyboard navigation.
A controlled binary icon transition with stable layout, interruptible state changes, and reduced-motion support.
A jitter animation primitive plus a ready-made vibration icon.
A composable like toggle whose heart fills from a chosen origin while miniature hearts scatter, with controlled and uncontrolled state.
A like toggle with the same props as Like, whose outline collapses into a bubble that hollows into a ring as the heart pops back amid paired confetti dots.
A ready-made labeled action built from the composable Like primitive.
A responsive Mermaid rendering surface with streaming and error states, repair hooks, and accessible pan and zoom both inline and in a fullscreen viewer.
A Motion-powered multi-step container that slides between steps and animates height changes.
A Base UI navigation menu with centered popups, animated viewport sizing, and shadcn-style composition.
Adds active, exact, and pending route state to Next.js App Router links, with typed routes, nested matching, and Cache Components support.
A fixed-slot one-time passcode input with paste, autofill, an error shake, and a staggered success wave.
A circular media toggle whose glyph morphs between a play triangle and pause bars, with a ghost or frosted over-video surface.
A CSS-powered primitive that layers an element with projected and contact shadows, supports an animation opt-out, and gathers on hover or active state.
A controlled or uncontrolled horizontal selector rail with centered labels, roving focus, and an edge-underline indicator on the active item.
A composed content browser that pairs a scalable vertical rail with one focused stage, collapsing to a scrollable strip on small screens.
A transient heads-up ring: it fills to a level around an icon, holds with a caption, then sweeps away. Hold for a set time or until dismissed, and update the value live for charging, uploads, goals, storage, or connection status.
An immersive scene selector whose photo lifts into a travelling corrugated wave, swapping to the next scene at the crest before settling flat.
A horizontal or vertical scan reveals processed results over the source, from product image tags to recognized invoice fields.
An art-directed scroll hero that expands a detail into context or focuses a full-bleed scene into a discovery.
A circular media skip control whose ring spins one full turn per press while the seconds it jumps stay upright at the centre.
A resizable brand-outline heart that leans left on hover before revealing soft blush marks.
A controlled or uncontrolled vertical list with optional initial selection, mirrored alignment, and a dot, dash, or custom icon indicator.
A circular media toggle built from three overlapping SVG elements that compress, slide, expand, and settle together with an optional duration override.
A Motion-powered layout primitive that observes content size and animates height changes.
A squeeze animation primitive plus a ready-made SVG card icon.