Installation

1. Set up shadcn

Kagadmodyaa components install through the shadcn CLI, so your project needs shadcn initialised first. In a React or Next.js project with Tailwind CSS already set up:

pnpm dlx shadcn@latest init

Follow its prompts — it writes a components.json and sets up the cn() helper and CSS variables that every Kagadmodyaa component expects.

2. Add a component

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/button.json

This copies components/ui/button.tsx (and any dependency it needs, like lib/utils.ts) directly into your project. Swap button.json for any other item's registry name — each component page shows its exact command under Installation → CLI. The same works for every free block and free effect.

3. Shorter names (optional)

Add Kagadmodyaa as a named registry in your components.json once:

{
  "registries": {
    "@kagadmodyaa": "https://kagadmodyaa.vercel.app/r/{name}.json"
  }
}

Then install anything by name:

pnpm dlx shadcn@latest add @kagadmodyaa/button

@kagadmodyaa/login-01 adds a block, @kagadmodyaa/aurora-ribbons adds an effect.

4. Or install from npm

A few items, like Sketchbook, are also published to npm for projects that prefer a dependency over vendored source:

pnpm add @kagadmodyaa/sketchbook

import { Sketchbook } from '@kagadmodyaa/sketchbook'
import '@kagadmodyaa/sketchbook/style.css'

All the free effects are in one package, @kagadmodyaa/effects, with one import path per effect:

pnpm add @kagadmodyaa/effects

import { AuroraRibbons } from '@kagadmodyaa/effects/aurora-ribbons'

It needs only react and react-dom (no Tailwind, no shadcn), and works in the Next.js App Router as is. Each effect page shows its own import under Installation → Or from npm.

Both install paths ship the same component — pick whichever fits your project.