Docs

Installation

You need a React 19 project with Tailwind v4 (Next.js, Vite or anything else). If the project doesn't use shadcn yet, set it up once:

npx shadcn@latest init

Then add any component by its registry address. The CLI writes the file to components/dimaac/ and installs the packages it imports (GSAP, for example).

npx shadcn@latest add https://ui.dimaac.com/r/colour-trail.json

# or with pnpm / bun
pnpm dlx shadcn@latest add https://ui.dimaac.com/r/colour-trail.json
bunx --bun shadcn@latest add https://ui.dimaac.com/r/colour-trail.json

Components fill their parent, so give it a size:

import { ColourTrail } from "@/components/dimaac/colour-trail";

export default function Hero() {
  return (
    <section className="h-svh">
      <ColourTrail src="/portrait.jpg" className="h-full w-full" />
    </section>
  );
}

The @dimaac namespace

Add DiMaac UI to registries in your components.json and every component installs by its short name. The index of every free component is ui.dimaac.com/r/registry.json.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tsx": true,
  "aliases": { "components": "@/components", "utils": "@/lib/utils" },
  "registries": {
    "@dimaac": "https://ui.dimaac.com/r/{name}.json"
  }
}

npx shadcn@latest add @dimaac/colour-trail @dimaac/mouse-trail

By hand

1. Install the packages listed on the component's page (many need only React).
2. Copy the component file into components/dimaac/<name>.tsx.
3. Tailwind v4 has to see the classes. If that folder isn't scanned already, add it with @source "../components/dimaac"; in your CSS.
4. Import it and give its parent a size.

Pro components

A few components are Pro. They come with Pro Components (bought once), any Templates plan while it is on, or All-Access; see Pricing. Everything else stays free. Their pages, their Markdown twins and the public registry never carry the source; it comes from the DiMaac API for your account or your licence key.

On the page

Signed in with the email you bought with, a Pro component's code is simply there. Or paste your licence key into the Code panel and choose Unlock. The code appears with the same tabs and Copy buttons as a free component. The key is kept in that browser tab only, so the other Pro pages open without typing it again, and Forget key clears it. It is sent to the DiMaac API and nowhere else. Your key is in the receipt email from Lemon Squeezy, and in My orders.

With the shadcn CLI

Add the authenticated registry once. Merge this into components.json; the key itself is never written into the file:

{
  "registries": {
    "@dimaac-pro": {
      "url": "https://api.dimaac.com/v1/ui/r/{name}.json",
      "headers": { "Authorization": "Bearer ${DIMAAC_LICENSE_KEY}" }
    }
  }
}

Put the key in .env.local (or your shell) and keep that file out of git:

DIMAAC_LICENSE_KEY=your-licence-key

Then add any Pro component by its name:

npx shadcn@latest add @dimaac-pro/card-ring-3d

For agents and scripts

The registry item is plain JSON behind a key: send it as Authorization: Bearer <key> (or X-License-Key). Without a valid key it answers 401, 403 for a key that is refunded, expired or not one of ours, and 402 for a good key whose purchase has no Pro components (a single template).

curl -H "Authorization: Bearer $DIMAAC_LICENSE_KEY" \
  https://api.dimaac.com/v1/ui/r/card-ring-3d.json

An agent should ask you for the key, read it from the environment, and never print it or commit it.

With AI agents

DiMaac UI is written so a coding agent can use it without help:

• ui.dimaac.com/llms.txt lists every component and the rules for installing them. llms-full.txt has all of it in one file.
• Every component page has a Markdown twin: add .md to its address (for example /components/colour-trail.md). It has the install commands, the props and the full source. A Pro component's twin has everything but the source: that comes from the authenticated registry (see Pro components).
• The Use with AI section on each component page and the Copy for AI menu give you a prompt with your playground settings, ready for Claude Code, Cursor, Claude, ChatGPT or v0.

Or just tell your agent where to look:

Read https://ui.dimaac.com/llms.txt and add the DiMaac UI colour-trail component to the hero of this page.

shadcn MCP server

With the @dimaac namespace in components.json, the shadcn MCP server lets Claude Code, Cursor or VS Code search and install DiMaac UI components by themselves. In Claude Code:

npx shadcn@latest mcp init --client claude

That writes .mcp.json (for Cursor the same JSON goes in .cursor/mcp.json, for VS Code in .vscode/mcp.json under "servers"):

{
  "mcpServers": {
    "shadcn": { "command": "npx", "args": ["shadcn@latest", "mcp"] }
  }
}

Then ask for it in plain words: "add the mouse trail from @dimaac to the gallery page".

Light and dark

The components keep their own colours where the effect needs them (a photo, a shader) and use Tailwind's dark: variant for the rest, so they follow your project's dark mode however you set it up. Every one respects prefers-reduced-motion: big motion turns off and the content stays visible.

Licence

• Free components are free to use in personal and client projects, commercial ones included. Credit is welcome, not required.
• Don't repackage them as a component library, template pack or UI kit of your own.
• Demo images belong to their photographers and are shown under their licences (Lummi, Unsplash; credits on each page). Use your own images in production.
• GSAP is free under its own Standard licence; the components use it as a normal library.
• Pro templates and Pro components are licensed per purchase: a template bought on its own or claimed with a plan is yours to use in your own and client projects, and so is every Pro component with Pro Components, a plan or All-Access. Keep your key to yourself; sharing it can get it switched off.