shashidharbabu Componentry
Componentry is a free, MIT-licensed, open-source collection of animated
React components, distributed shadcn-style: the CLI copies TypeScript source
into your repo — no npm package to depend on. By Harsh Jadhav (@harshjdhv),
backed by the Vercel OSS Program. Source: github.com/harshjdhv/componentry.
- Canonical domain:
componentry.dev—componentry.fun301-redirects there (the registry metadata still says .fun; same site). - Trap: the npm package named
componentryis an unrelated design-system library. Nevernpm install componentry— components arrive only via the shadcn registry or copy-paste from the docs. - Components use
framer-motion(verified in registry payloads) — our exact stack, nomotion-package migration needed. Heavier pieces are canvas/WebGL and need care (see integration reference).
Install
Requires a shadcn-initialized project (components.json, cn() in
lib/utils) — mechanics, and the Tailwind v3.4 vs v4 CLI caveat, are the
shadcn skill's territory; read it before the first install in this repo.
npx shadcn@latest add @componentry/magnetic-dock
Source lands in components/ui/<name>.tsx; npm deps declared per component
(e.g. framer-motion) are installed automatically. No CLI? Fetch the registry
JSON directly — https://componentry.dev/r/<name>.json — and copy
files[].content by hand. Docs per component:
https://componentry.dev/docs/components/<name>.
What exists (full registry, verified Aug 2026)
| Category | Components |
|---|---|
| Backgrounds / spectacle | matrix-rain, dither-gradient, dither-prism-hero, animated-gradient, aurora-flow, silk-aurora, prism-gradient, liquid-chrome, liquid-blob, webgl-liquid, particle-galaxy, circuit-board, noise-texture, ascii-effect, closing-plasma, pixel-canvas |
| Kinetic typography | kinetic-text-reveal, letter-cascade, text-repel, text-morph, flipping-word-swap, cursor-driven-particle-typography, hyper-text, text-animate, split-flap-display |
| Scroll set-pieces | scroll-based-velocity, sticky-scroll-cards, scroll-split-card, scroll-choreography, scroll-tilted-grid |
| Interactive set-pieces | magnetic-dock, magnet-lines, eye-tracking, image-trail, pixel-image-trail, image-ripple-effect, infinite-image-field, spotlight-card, hover-transition, mac-keyboard, music-player, signature, scrub-input, wheel-carousel, spiral-3d-slider, orbit-card-stack, layered-stack, collection-surfer, ripple-transition |
| Buttons / UI | shimmer-button, pulsating-button, interactive-hover-button, border-beam, command-menu, auth-modal, showcase-card, testimonial-marquee, github-calendar, newsletter-bookshelf, flight-status-card, dithered-logo, hero-geometric |
| Blocks | gradient-hero-01, pricing-01, pricing-02 |
Componentry vs motion-primitives (both live in this repo — pick, don't mix blindly)
Same distribution model, different register. motion-primitives (33
components, motion/react imports) is the restrained layer: text reveals,
number tickers, morphing dialogs, marquees — UI polish. Componentry
(framer-motion imports) is the spectacle layer: full-bleed canvas
backgrounds, cursor physics, scroll set-pieces — landing-page theater.
- Animating numbers, dialogs, subtle reveals → motion-primitives skill.
- A hero that needs a matrix rain / aurora / magnetic dock → componentry.
- Overlap (text reveal, marquee): prefer whichever library the page already
uses; do not import both for the same job. Note their import styles differ
(
framer-motionvsmotion/react) — coexistence works but is two copies of the same engine if the project ever migrates; our stack pins motion v13 (motion/react), which favors componentry for new spectacle work.
When NOT to use
- Dense product surfaces — dashboards, tables, review queues. Spectacle components compete with data. (rocketride-frontend skill owns app archetypes.)
- A static treatment does the job — generated SVG backgrounds → haikei skill; CSS gradients cost 0KB.
- Restrained brand direction — a matrix rain on a trust-first B2B page is a taste failure (taste-skill), not an engineering one.
- Low-power / mobile-first audiences for canvas/WebGL pieces — check the performance tiers in the reference before committing.
- You need a maintained API contract. Copy-in source means you own it: no upstream fixes unless you re-add and re-diff.
Non-negotiables
Details and code in references/integration.md.
- Background/spectacle components are decoration:
aria-hidden="true",pointer-events-nonewrapper, behind content withisolate+-z-10. - Every continuous canvas loop needs a
prefers-reduced-motiongate (render static or nothing) and an off-screen pause. Most componentry components do NOT ship these — you add them at the call site. - Canvas/WebGL pieces load via
next/dynamicssr: false, route-local, never in shared layout JS. - One spectacle component per viewport, maximum.
- Text over animated backgrounds: contrast-check against the busiest frame; add a scrim before dialing the effect down.
- After install, read the copied source — you own it now; strip unused variants and align hardcoded colors to Tailwind tokens (most components support dark mode, verify per component).