Loading
Beautiful, production-ready animated React & shadcn components, installed as editable source. Free & open source.
Items
Free to install
Behind a key
Last push
yesterday
8 stars. Both figures are GitHub's about this repository, not ones this index measured.| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Activity Streamactivity-stream | A collaboration/product activity feed that goes beyond a timeline: groups repeated actions, date separators, an unread divider, live arrival insertion, and event-type/actor filtering. Presentation-only — the app supplies events. | Components | Free | 1 dep | |
| Adaptive Safe-Zone Gridadaptive-safe-zone-grid | A content-aware structural grid for hero sections: the grid quiets inside one or many safe areas (via an SVG mask) so foreground copy stays readable, while detail collects toward the frame edges. Optional perspective skew, highlighted cells, and a restrained accent shimmer. Deterministic (SSR-safe), light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused. SVG + CSS only. | Components | Free | no deps | |
| Agent Run Timelineagent-run-timeline | A presentation-only timeline for a multi-step agent / automation run: an ordered rail of steps with tool calls, outputs, errors, retry attempts, optional nested sub-stages, human approval checkpoints, and run-level lifecycle controls (cancel / resume). The app owns the run and every status; the component never executes an agent, generates reasoning, invents confidence, or claims a step succeeded on its own. | Components | Free | 1 dep | |
| AI Response Streamai-response-stream | Renders a streaming assistant response supplied by your app — text, fenced code with copy, inline [n] citations to a sources rail, and streaming/stopped/complete/error states with Stop, Retry, and Copy. Presentation only: it never calls a model. Reduced-motion shows text instantly; a polite live region announces completion, not tokens. | Components | Free | 1 dep | |
| Animated Accordionanimated-accordion | Radix Accordion with Motion height/opacity reveal and a rotating chevron. Single/multiple modes, keyboard, and disabled state preserved. Reduced-motion safe. | Components | Free | 2 deps | |
| Animated Buttonanimated-button | A real button with press-scale feedback and accessible loading (aria-busy + polite spinner) and success states. Solid, outline, and ghost variants. Reduced-motion safe. | Components | Free | 1 dep | |
| Animated Dialoganimated-dialog | Radix Dialog with Motion enter/exit choreography (scale, slide-up, fade). Preserves portal, focus trap, Esc, and overlay. Reduced-motion safe. | Components | Free | 2 deps | |
| Animated Gridanimated-grid | A CSS-only animated grid background layer with a slow drift, optional radial fade mask, and a prefers-reduced-motion stop. No canvas, no JS loop. Decorative. | Components | Free | 2 deps | |
| Animated Iconsanimated-icons | Two inline-SVG animated icons — AnimatedArrow (nudge) and AnimatedCopy (copy-to-check swap) — triggered on hover, tap, focus, or mount. Decorative and inherit their label from a parent control. Reduced-motion safe. | Components | Free | 1 dep | |
| Animated Listanimated-list | A semantic list whose items fade/slide in with a stagger and animate out cleanly on removal, with layout-based reordering. Requires stable keys. Reduced-motion safe. | Components | Free | 1 dep | |
| Animated Tabsanimated-tabs | Radix Tabs with a Motion layoutId sliding active indicator and cross-faded, direction-aware content. Keyboard and roles preserved. Reduced-motion safe. | Components | Free | 2 deps | |
| API Request Inspectorapi-request-inspector | A presentation-only inspection surface for a single HTTP request/response your app already has — method/url/status/duration/timing phases, headers/query/body, error, requestId, environment, retryCount, and an auth summary. Credential headers and fields are redacted by default and can never be revealed from inside the component. Expandable sections, in-payload search, formatted/raw + wrapped/scrolling views, and copy of url/request/response. It never sends anything. | Components | Free | 1 dep | |
| Approval Workflowapproval-workflow | Display and control an app-owned approval process — sequential or parallel stages, required/optional reviewers, minimum approvals, current-user actions (approve / reject / request changes / comment / cancel / resubmit), decision history, and collapsing completed stages. The app owns authorization; the component surfaces app-provided disabled reasons. Status is icon + label; reduced-motion safe. | Components | Free | 1 dep | |
| Aurora Panelaurora-panel | A product card that carries its own sky: three dual-sine ribbons drift across a canvas roof, softened by one GPU CSS blur at 116% scale with a seeded grain tile over the top and dark-only stars beneath. Pointer x retargets a lean spring (k=50, d=14) that shifts ribbon phase up to 90px and lifts amplitude ~20%, relaxing home on leave. One rAF loop, DPR capped at 2x, still-frame under reduced motion. | Components | Free | no deps | |
| Blur Textblur-text | Reveals text segment-by-segment with a de-blur and drift. Reduced-motion safe. | Components | Free | 1 dep | |
| Border Beam Panelborder-beam-panel | A panel with twin comets orbiting a 2px border ring built from a rotating conic gradient cut by a two-layer CSS alpha mask (never an SVG luminance mask). The angular velocity itself is sprung (k=30, d=11), winding to 240 deg/s on hover and coasting back to 42 deg/s, with an optional coral signature comet 180 degrees opposed. One custom property per frame; content never repaints. | Components | Free | no deps | |
| Card Stack Deckcard-stack-deck | A deck that handles like physical cards: every card rides a continuous slot spring (k=90, d=12) and sending the front card drives a 210px side arc, a 150px z-lift and a full rotateY flip that reveals a patterned back before it tucks in behind. Drag, tap, prev/next buttons and arrow keys all drive one state, with an aria-live announcement per shuffle and instant reordering under reduced motion. | Components | Free | no deps | |
| Cart Item Transitioncart-item-transition | An app-controlled animated cart LINE ITEM (not a full cart) — arrival, quantity/total morph, variant crossfade, price-change, limited/unavailable, removal→Undo→restore, with optimistic mutation + automatic rollback and honest failed/Retry. Never touches a backend or payment; price/inventory are app-owned. No manipulative urgency. | Components | Free | 1 dep | |
| Chart Recorderchart-recorder | Five spectrum lanes written live by glowing pens: data packets stream the traces, hot ink cools into a settled trail, and event markers bloom rings as the pens cross them. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback. | Components | Free | no deps | |
| Checkout Progresscheckout-progress | An app-controlled multi-step checkout progress/orchestration surface (not a payment processor) — current + completed + editable steps, per-step validation + blocked reasons, async step save, return-to-previous, error/progress summaries, sticky order-summary slot, and optional guest/account modes. Never collects or processes payment; no fake processing progress. | Components | Free | 1 dep | |
| Comment Threadcomment-thread | A production comment thread your app persists: root comments + nested replies, mentions, reactions, edit, resolve/reopen, delete, and optimistic send (pending → sent, failed → retry, temp-id replacement, focus preserved). Unread divider and sort. The app owns persistence + permissions. | Components | Free | 1 dep | |
| Compare Revealcompare-reveal | A before/after comparator whose divider chases the pointer through a spring (k=140, c=18, ζ≈0.76) so the lag reads as elastic resistance, demonstrates itself once on first viewport entry (50 → 96 → 4 → 50 over 2.6s), and snaps home on double-click. Coral signature handle; real slider semantics with 2% / Shift 10% arrow steps. | Components | Free | no deps | |
| Copperplate Hatchcopperplate-hatch | An engraved plate lit from within: candle-gold light waves radiate from a focal point and ignite each burin stroke as they pass, making the whole plate glint in sequence. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback. | Components | Free | no deps | |
| Core Stratacore-strata | A survey scanner reading the deep record: three parallax strata layers drift while a luminous beam sweeps the core, igniting amber marker seams as it finds them. One canvas + a single rAF loop; committed dark Motion Lab palette; reduced-motion static frame, offscreen-paused, forced-colors fallback. | Components | Free | no deps | |
| Cursor Cometcursor-comet | A canvas particle comet that reads pointer velocity, not just position: a tight ember when you drift, a long azure-to-cyan plume with coral sparks when you flick. Idle, the particles coil into an ambient orbit ring. Fixed particle pool, pre-rendered sprites with additive blending, DPR capped at 2x, one rAF loop, offscreen-paused, static orbit frame under reduced motion. | Components | Free | no deps | |
| Data Contour Surfacedata-contour-surface | A data-driven contour background: contours are computed from application-supplied values (signed focal pressure points, thresholds, active/comparison regions) via canvas marching-squares — not a random topographic texture. Emphasized thresholds get heavier bands, the active region brightens, comparison regions ghost, and data changes ease smoothly. One canvas + one rAF loop (no per-frame React state, no WebGL). Deterministic first paint, intentional light/dark, reduced-motion-static, forced-colors-safe, offscreen-paused. | Components | Free | no deps | |
| Data Quality Statusdata-quality-status | A presentation-only data-quality panel that displays app-supplied freshness/completeness/accuracy metrics (rendering "Unknown" when unmeasured), a filterable list of validation checks with keyboard-expandable per-check issue lists, affected-record counts, last-checked time, and a retry-validation control. Status is icon + text, never colour alone. It never claims accuracy without supplied evidence. | Components | Free | 1 dep | |
| Data Refresh Statedata-refresh-state | A rich, accessible refresh indicator your app drives: idle, checking, refreshing (determinate or honestly-indeterminate), partially updated, success, stale, offline, error, paused, and cancelled — with manual refresh, cancel, retry, pause/resume, and interval controls in compact, inline, and panel modes. Never spins on idle, never fakes progress, and never signals status by color alone. Presentation-only: the host owns the fetch and progress. | Components | Free | 1 dep | |
| Decrypt Textdecrypt-text | Copy that arrives decoded rather than typed: every glyph boils from the first frame and character i locks at 350 + i·55ms ± 120ms behind a 420ms accent flash. Mount / in-view / hover triggers, a monospace terminal variant, SSR-readable text, reduced-motion safe. | Components | Free | no deps | |
| Deployment Pipelinedeployment-pipeline | Visualize a CI/CD deployment run: ordered stages with queued/running/passed/failed/cancelled/skipped status, running-stage emphasis, per-stage durations, expandable logs, and a Retry control. Display-only — the host app supplies the pipeline data. | Components | Free | 1 dep | |
| Depth Parallax Scenedepth-parallax-scene | A world behind the glass: consumer-supplied layers travel at depth-proportional rates as the scene passes through the viewport and drift subtly with the pointer, while the far layers slip out of focus as the near ones pass. translate3d only, quantized depth-of-field blur, one rAF loop, no scroll container in page mode, reduced-motion frozen composition. | Components | Free | no deps | |
| Environment Switcherenvironment-switcher | A presentation + control surface for choosing the environment an app targets (dev / staging / production, regions, preview branches). Current-environment trigger opens a searchable, fully keyboard-navigable listbox with per-environment status/health, region/branch/version/last-deploy, disabled reasons, recents + favorites, and optional groups. Production switches are icon + label marked (never color alone) and can be gated behind a confirmation dialog. Controlled value/onValueChange with app-owned switching + error/retry. It never mutates a backend. | Components | Free | 1 dep | |
| Event Propagation Matrixevent-propagation-matrix | A temporal background where application events propagate through a structured cell matrix (rows = regions/streams, cols = time/lanes) — origin cells light, then neighbors along the grid, so waves step cell-to-cell rather than as free-space circles. Overlaps are damped, failed propagation halts with a non-color glyph, acknowledged events dim, and old events settle into a quiet history layer. SVG + CSS only. Deterministic (SSR-safe), light/dark, reduced-motion shows current relationships statically, forced-colors-safe, offscreen-paused. | Components | Free | no deps | |
| File Upload Pipelinefile-upload-pipeline | An application-controlled file upload workflow: presents app-supplied upload items with progress, pause/resume/retry/cancel/remove, processing stages, and empty/drag-over/partial-failure/offline states. It never uploads bytes itself unless given an adapter. Status by icon+text; progress announcements throttled. | Components | Free | 1 dep | |
| Filmstrip Scrubfilmstrip-scrub | A filmstrip with a spring-loaded playhead (k=90, c=16, ζ≈0.84 — one soft overshoot): hover or drag the strip and the large preview crossfades ⌊p⌋ into ⌈p⌉ by the fractional part, with frame ticks and a monospace timecode. Scrubs itself at 0.9 frames/s when idle. The strip is a real slider with arrow/Home/End keys. | Components | Free | no deps | |
| Filter Result Transitionfilter-result-transition | A transition layer for filtered/searched collections your app drives: cards enter, leave, and reorder with layout continuity, the result count morphs, and empty/loading/error states cross-fade. If the focused item is filtered out, onFocusFallback fires so focus never drops to the page root. Capped entrance stagger; results are never delayed for animation; reduced motion is an instant swap. Not a data table or a search library. | Components | Free | 1 dep | |
| Flow Warp Imageflow-warp-image | A media surface that liquefies under the pointer: a 32×20 spring mesh (k=90, c=8) displaces sub-rects of your image with a (1−d/R)² falloff and snaps back elastically, throws a radial splash on pointer exit, and swells on a Lissajous path while idle. One canvas, DPR capped at 2, arrow keys and Space as the keyboard equivalent. | Components | Free | no deps | |
| Glass Refraction Panelglass-refraction-panel | Frosted panes over a live scene: five gradient orbs drift on lissajous paths across a DPR-capped canvas (additive in dark, soft alpha in light, palette re-read from tokens on theme change) while each glass pane parallaxes at its own depth on a critically damped spring (k=110, d=21). A rotated specular band sweeps the main pane on every viewport entry. Translate3d-only layer motion, offscreen-paused. | Components | Free | no deps | |
| Gooey Actionsgooey-actions | A floating action button that blooms into satellite actions through a gooey metaball merge - blur plus alpha contrast under the hood - with underdamped springs (~18% overshoot, 45ms stagger) and per-satellite magnetic hover. Crisp icons ride an unfiltered twin layer sharing the same transforms. Real buttons with menu semantics, roving focus, and Escape-to-close; instant fade under reduced motion. | Components | Free | no deps | |
| Holo Cardholo-card | A 3D tilt card that behaves like a physical foil pass: twin underdamped springs (k=120, d=10) chase the pointer so the card lags and overshoots ~6% on release, while the specular glare and iridescent conic foil stay pinned to the raw pointer — light is instant, mass is not. Counter-moving ground shadow, arrow-key tilt, touch drag, reduced-motion resting pose, offscreen-paused. | Components | Free | no deps | |
| Kanban Card Movementkanban-card-movement | An application-controlled Kanban interaction layer: pointer + touch + keyboard/menu card movement, drop validation, optimistic move with failure rollback, drop indicators, and empty columns. Dragging is never required. Clean-room (no external drag library); transform-based movement that doesn't re-render every card. | Components | Free | 1 dep | |
| Keyboard-safe Formkeyboard-safe-form | A presentation-only mobile form whose sticky Submit/Cancel bar rides above the virtual keyboard via the VisualViewport API (degrading gracefully to a plain sticky footer where unavailable), with an aria-linked validation summary, cancellable async submission, and an unsaved-changes discard guard. The app owns the fields and submission. | Components | Free | 1 dep | |
| Kinetic Emphasiskinetic-emphasis | A headline where reading emphasis physically travels through the copy: an activation front sweeps in reading order and author-marked <em> phrases ignite into a persistent designed underline treatment. SSR/no-JS/reduced-motion render the final designed state. | Components | Free | 1 dep | |
| KPI Number Morphkpi-number-morph | An accessible KPI stat that smoothly morphs between values with a direction-aware trend (arrow + sign, never color alone). Controlled value; locale, compact, and currency formatting; loading and error states. Reduced-motion snaps. | Components | Free | no deps | |
| Lens Cardlens-card | A refraction lens that floats over your own content: everything under the glass magnifies with a chromatic fringe while the background grid physically bends around the rim. A duplicated scaled clone clipped by a moving circle() - no filters, no repaint storms - with a spring-lagged centre that drifts on its own when unattended. Clones are aria-hidden, so AT reads the content once. | Components | Free | no deps | |
| Liquid Fill Headlineliquid-fill-headline | An outlined wordmark that fills bottom-up with a sloshing two-polygon clip-path wave rebuilt per frame, settles as the amplitude decays, then takes a coral shimmer sweep. Pure CSS-clipped text (never an SVG luminance mask), controllable level, reduced-motion safe. | Components | Free | no deps | |
| Live Log Streamlive-log-stream | A live log viewer for developer surfaces (deploy/build output, jobs, server events): auto-follow that never fights the user's scroll, a "N new lines" resume indicator, pause/resume, search, per-level filtering, copy, clear, and bounded history. Levels are shown by icon + label + prefix, never colour alone. Display-only — the host app supplies the entries. | Components | Free | 1 dep | |
| Live Presence Stacklive-presence-stack | A live avatar stack for collaborative workspaces: animated join/leave without row reflow, per-user active/idle/editing/viewing status (dot + label, never color alone), an overflow +N count, and a keyboard-accessible participant detail popover. Controlled presence data. | Components | Free | 1 dep |
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Agent Operations Heroagent-operations-hero | An editable hero block for AI/automation products that shows a real agent workflow with outcome copy + CTAs. Composes Agent Run Timeline (trimmed), Prompt Composer (compact), Tool Call Activity (one active tool), and Source Citation Rail (one result) at reduced complexity across idle/running/tool-active/waiting-for-approval/completed/failed. App-controlled — never simulates a model or shows chain-of-thought. SSR-safe, reduced-motion-safe. Clearly-fictional demo data. | Blocks | Free | 1 dep | |
| AI Agent Workspaceai-agent-workspace | A composed, app-controlled AI agent workspace that composes Agent Run Timeline + Tool Call Activity + AI Response Stream + Source Citation Rail into one realistic full page; the app owns every state and it never simulates a model. | Blocks | Free | 1 dep | |
| AI Interface Packai-interface-pack | The complete AI Interface Pack — installs the AI Agent Workspace block and its four components (AI Response Stream, Tool Call Activity, Source Citation Rail, Agent Run Timeline) as editable source, deduping shared utilities. | Blocks | Free | 1 dep | |
| Collaboration Packcollaboration-pack | The complete Collaboration Pack — installs the Collaborative Review Workspace block and its four components (Live Presence Stack, Activity Stream, Approval Workflow, Comment Thread) as editable source, deduping shared utilities. | Blocks | Free | 1 dep | |
| Collaborative Launch Herocollaborative-launch-hero | An editable hero block for collaboration/review products showing people active, a review underway, and one pending decision with outcome copy + CTAs. Composes Live Presence Stack, Typing and Presence, Approval Workflow (one pending decision), Comment Thread, and Activity Stream across review-open/commenting/changes-requested/approval-pending/approved/rejected/resolved. App-controlled, clearly-fictional demo data. SSR-safe, reduced-motion-safe. | Blocks | Free | 1 dep | |
| Collaborative Review Workspacecollaborative-review-workspace | A composed review screen: Live Presence Stack, an app-owned Approval Workflow, the Comment Thread, and an Activity Stream wired into one demo state machine — approving advances the workflow and records activity; new comments appear in the thread and the feed. Clearly fictional users; the app owns persistence + authorization. | Blocks | Free | 1 dep | |
| Data Motion Packdata-motion-pack | The complete Data Motion Pack — installs the Live Operations Dashboard block and its four components (KPI Number Morph, Streaming Data Rows, Filter Result Transition, Data Refresh State) as editable source, deduping shared utilities. | Blocks | Free | 1 dep | |
| Deployment Command Centerdeployment-command-center | A composed, app-controlled deploy console block: an Environment Switcher in the top bar, a Deployment Pipeline as the main column, a Live Log Stream beneath it, and an API Request Inspector in the side panel — wired behind one demo state machine (env selection, deploying, following logs, request inspection, failure, retry, completion). Provider-neutral fictional data; it never talks to a real deployment provider. | Blocks | Free | 1 dep | |
| Deployment Control Herodeployment-control-hero | An editable hero block for developer-tool/infra products showing a real deployment control surface with outcome copy + CTAs. Composes Environment Switcher (selected env), Deployment Pipeline (four stages), a short Live Log Stream, and one API Request Inspector result across ready/deploying/validating/failed/retrying/completed. App-controlled, provider-neutral demo data. SSR-safe, reduced-motion-safe, readable on laptop and mobile. | Blocks | Free | 1 dep | |
| Developer Tools Packdeveloper-tools-pack | The complete Developer Tools Pack — installs the Deployment Command Center block and its four components (Deployment Pipeline, Live Log Stream, API Request Inspector, Environment Switcher) as editable source, deduping shared utilities. | Blocks | Free | 1 dep | |
| Live Data Command Herolive-data-command-hero | An editable hero block for operational-data products centered on continuity and changing state. Composes KPI Number Morph (three metrics), Data Refresh State, a small Streaming Data Rows subset, and Filter Result Transition across initial/live/filtering/refreshing/partial-update/stale/error/recovery. App-controlled, clearly-fictional demo data. SSR-safe, reduced-motion-safe. | Blocks | Free | 1 dep | |
| Live Operations Dashboardlive-operations-dashboard | A composed, app-controlled ops dashboard: KPI Number Morph stats with a Data Refresh State control, a Filter Result Transition section, and a Streaming Data Rows live feed — wired to one demo state machine across loading, live, filtered, refreshing, partial update, stale, error, and recovery. Not a charting library; fictional demo data. | Blocks | Free | 1 dep |
| Component | What the registry says it is | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Motion primitivesprimitives | Shared, dependency-free hooks used across workflow components: useReducedMotion, useVisibilityPause (offscreen pause), useSequence (drive live data over time), formatNumber (locale), useAnimatedNumber. | Utilities | Free | no deps | |
| cn() utilityutils | Tailwind class-merge helper used by every Motiq component. | Utilities | Free | 2 deps |