Tools· Design & Creative

    Vengeance UI

    Open source React and Next.js component library for expressive marketing animations, with its own template system for full page sections and a set of blocks purpose-built for agent and AI product interfaces.

    designingexecutableunklar

    Description

    Strengths

    Wide range of animated blocks
    The catalog covers layout and grid elements, tooltip and marquee components, text animations, animated buttons, loaders, and showcase elements in a single library.
    Editable source instead of a black-box package
    Components are copied as TypeScript files directly into the project, rather than consumed as a versioned, encapsulated npm dependency.
    Its own template system for complete page sections
    The Mist family delivers full sections such as Hero, Features with several variants, CTA, FAQ, Auth, Contact, Comparator, Logo Cloud, and Footer, not just individual widgets.
    Monorepo and registry-alias support
    The CLI supports specifying a workspace path in monorepos and can be configured with a shorter registry alias.
    Modern technical foundation
    React 19.2, Next.js 16.2, TypeScript, and Tailwind CSS form the base, complemented by 24 Radix UI primitives.

    Assessment

    AI features

    • Blocks for agent and AI product interfaces Several components are purpose-built for LLM and agent dashboards, such as an Agent Bento Grid and panels styled like a token monitor, a knowledge base, or a tool inspector.
    • Automatic dependency resolution per component The registry CLI automatically resolves the dependencies a given component needs, such as Framer Motion, Radix, GSAP, or Three.js with shader packages, instead of assembling them manually.
    • Registry URL as a direct, scriptable install path Components can also be installed through a fixed registry URL instead of the alias command, which fits into automated setup workflows.

    Suitable for

    • Marketing and landing pages that need a striking, animated motion moment, such as displacement hover effects, kinetic text, or scroll-driven layouts
    • Teams building interfaces for agent or AI products that want ready-made blocks such as a bento grid or token-monitor panels
    • Projects that want full access to component source code instead of a versioned npm dependency
    • Less suitable for Less suitable for projects with strict licensing requirements, since the repository has no LICENSE file, or for setups already firmly committed to motion.dev instead of Framer Motion

    Limitations and notes

    • No LICENSE file in the repository Despite describing itself as open source, the GitHub repository has no LICENSE file, which legally defaults to an all-rights-reserved status. The usage-rights question should be clarified directly with the author before commercial or white-label use.
    • No standalone npm package Components are pulled in through source copy or the shadcn registry CLI, not as a versioned npm dependency. The files then live in your own project and are maintained there yourself.
    • Community token promoted in the repository The project's README promotes its own Solana community token, an unusual signal for a UI library that is worth factoring into an assessment of the project's long-term maintenance.
    • Domain differs from the brand name The brand name is "Vengeance UI," but the domain vengenceui.com drops the letter "a," as does the repository name on GitHub. Care with the spelling is needed when navigating directly to the site.
    • Dependency needs vary by component Some blocks need only Tailwind and Radix UI, others additionally require GSAP or Three.js with shader packages. Before a manual source copy, it is worth checking a component's imports to avoid unexpectedly large bundle increases.

    Quick start

    1. Set up a Next.js project with the App Router, TypeScript, and Tailwind CSS, for example through create-next-app, or use an existing project with a shadcn/ui setup.
    2. Browse the component overview at vengenceui.com/docs/components-overview and pick the suitable blocks.
    3. Install the chosen component through the shadcn CLI, for example with npx shadcn@latest add @vengeanceui/<component>, or alternatively through the matching registry URL.
    4. If needed, add a registry alias to the project configuration to use shorter component names during installation.
    5. Align the installed files with your own design tokens and wire them into the application.

    Tips

    • Check a component's imports before adding it, because animation-heavy blocks can bring in GSAP or Three.js, while others need none of these dependencies.
    • Clarify the licensing situation for the specific use case directly with the author before taking components into commercial or white-label projects.
    • In monorepo setups, specify the workspace path explicitly in the CLI instead of relying on automatic detection.
    • Use only one strong animated focal point per section, instead of combining several bento grids, kinetic text, and glass docks at once, so the page does not feel overloaded.

    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