Tools· Design & Creative

    Componentry

    Free collection of roughly 40 animated React components for copy-paste use, installable through the shadcn registry and reachable directly from AI coding assistants via its own MCP server.

    designingexecutableOpen Source

    Description

    Strengths

    Free and open source
    All roughly 40 components are available for free, including commercial projects, as copy-paste code rather than a subscription or license model.
    Broad motion library
    Four categories, text animations, general components, hero backgrounds, and visual effects, cover most common marketing motion use cases.
    shadcn registry integration
    Components install through the familiar shadcn CLI directly as editable source code in the project, not as an external npm dependency.
    Live preview before adoption
    The documentation site shows every component live beforehand, so its effect and style can be checked before it is added.
    Directly reachable author
    Harsh Jadhav actively maintains the library and is directly reachable by email for custom building blocks, collaboration, or questions.

    Assessment

    AI features

    • MCP server for prompt-based component access A dedicated MCP server makes the entire component library addressable from AI coding assistants such as Claude Code or Cursor.
    • Setup through the shadcn MCP initialization The server is enabled with the `pnpm dlx shadcn@latest mcp init` command and connected to Componentry through the registry entry in the project configuration.
    • Natural-language component requests Once set up, prompts such as "Add a blur reveal animation" or "Add a vertical marquee of logos" are enough for the assistant to resolve and insert the matching component through the registry.

    Suitable for

    • Marketing and landing page teams that need finished animated hero sections, text effects, or interactive widgets quickly, without building them from scratch
    • Projects already on React and Tailwind CSS that want to add new components through the shadcn registry or direct copy-paste
    • AI-assisted development environments such as Claude Code or Cursor that should request components directly by prompt through the MCP server
    • Less suitable for Less suitable for projects that must avoid WebGL entirely, pursue a flat, minimal brand aesthetic, or have already standardized on a different animation engine such as Motion

    Limitations and notes

    • Peer dependencies required framer-motion, clsx, and tailwind-merge must be installed in the project; WebGL-heavy hero components additionally need a matching WebGL or Three dependency.
    • Generically styled Components ship with neutral default styling and need to be adapted to a project's own colors and brand before production use.
    • WebGL hero components as the costliest item The Dither, Prism, and Liquid hero backgrounds cause the library's highest rendering cost, so only one full-viewport WebGL background per page is recommended, and reduced-motion settings should be respected.
    • Framework lock-in The library requires React and Tailwind CSS and cannot be adopted in other frontend stacks without significant adaptation. The most convenient path runs through the shadcn registry, though the source code can also be copied directly.
    • Maintained by a single author Componentry is published by Harsh Jadhav, and requests go directly to him.

    Quick start

    1. Register the registry once per project in `components.json`, with the namespace `@componentry` and the URL `https://componentry.fun/r/{name}.json`.
    2. Install the peer dependencies, for example with `pnpm add framer-motion clsx tailwind-merge`, adding the matching WebGL or Three library for WebGL components.
    3. Pick a suitable component on componentry.fun and check it in the live preview.
    4. Pull the chosen component into the project with `npx shadcn@latest add @componentry/<component>`; the file lands under `components/ui/`.
    5. Adjust the component's colors, spacing, and tokens to the project's own brand.

    Tips

    • Look at every component in the live preview on componentry.fun before adopting it, since effect and performance vary strongly between components.
    • Use WebGL-heavy hero backgrounds sparingly; one full-viewport WebGL background per page is usually enough.
    • Set up the MCP server if working regularly in Claude Code or Cursor, which saves manually copying individual components.
    • Respect users' reduced-motion settings, especially for the more expressive particle and text animations.

    Access

    Last reviewed: · Pricing, plans and features are a snapshot in time. Check the provider's own page before deciding.

    In the workshop this becomes your method.

    Whoever sees this process run once wants the agent behind it next. We build that in the workshop From Process to Agent.

    View workshops

    Related resources

    Browse all resources

    Conversation, not pitch

    Understand first, then decide. We take time for an initial conversation, without sales pressure, without obligation.

    Schedule a call