Installation

Three steps: point the CLI at the registry, install the theme, add components. The theme comes first because everything else assumes its tokens.

Requirements

React 19 with Tailwind CSS v4.
A project already initialised with shadcn (npx shadcn@latest init), so components.json and lib/utils.ts exist.
Dark mode wired to a .dark class on <html>. next-themes is the usual way.

Add the registry

One key in components.json teaches the CLI the @duck namespace.

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": { "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true },
  "aliases": {
    "components": "@/components",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "utils": "@/lib/utils"
  },
  "registries": {
    "@duck": "https://duckui.davideghiotto.it/r/{name}.json"
  }
}

Install the theme

This writes the token contract and the holo utilities into your stylesheet. Do it before adding any component.

$pnpm dlx shadcn@latest add @duck/theme

The theme touches only globals.css. It adds the light and dark token sets, the duck extras (--holo, --foil, --glow, --sticker-border), the utility classes and the keyframes. Existing shadcn components change appearance immediately.

Add components

Each one is a single file. Dependencies are resolved for you.

$pnpm dlx shadcn@latest add @duck/quack-button @duck/sticker-card @duck/holo-avatar

Files land in components/ui/ and hooks in hooks/, following the aliases in your components.json.

Fonts

Optional, but the system was drawn with these. Bricolage Grotesque for display, Geist for text and code.

app/layout.tsx

import { Bricolage_Grotesque } from "next/font/google"
import { GeistMono } from "geist/font/mono"
import { GeistSans } from "geist/font/sans"

const display = Bricolage_Grotesque({
  subsets: ["latin"],
  variable: "--font-bricolage",
  display: "swap",
})

// then, in globals.css @theme inline:
//   --font-display: var(--font-bricolage), sans-serif;
//   --font-sans: var(--font-geist-sans), system-ui, sans-serif;
//   --font-mono: var(--font-geist-mono), ui-monospace, monospace;

Manual install

No CLI, no problem. Every item is plain JSON at a stable URL.

curl https://duckui.davideghiotto.it/r/quack-button.json

The response contains the file contents, the npm dependencies and the registry dependencies. Copy the source into components/ui/, install the listed packages, and make sure the theme is in place first.