getting-started

Installation

Use the shadcn CLI to copy components into your project, or install the npm package.

Registry is hosted at https://void.ui.unsanity.ai. The shadcn CLI uses content negotiation (no .json in install URLs). Local dev: npm run dev with NEXT_PUBLIC_VOID_SITE_URL=http://localhost:3000.

1. shadcn init (if you have not already)

npx shadcn@latest init -d

2. Agent skill (optional)

npx skills add unsanityinc/shadcn-void --skill void
# Full guide: /docs/getting-started/agent-skill

3. Register the @void registry

// components.json — no .json suffix; server uses content negotiation
{
  "registries": {
    "@void": {
      "url": "https://void.ui.unsanity.ai/r/{name}"
    }
  }
}

3b. Registry host

# Production: https://void.ui.unsanity.ai
# Local override: NEXT_PUBLIC_VOID_SITE_URL=http://localhost:3000 npm run dev

4. Add MotionProvider + GSAP core

npx shadcn@latest add @void/motion-provider

5. Add components (pick what you need)

npx shadcn@latest add @void/fade-in @void/animate @void/text-reveal @void/glow-card

# Direct URLs (no .json) — same host, content negotiation:
npx shadcn@latest add https://void.ui.unsanity.ai/r/fade-in
npx shadcn@latest add https://void.ui.unsanity.ai/r/animate

# Root registry manifest (homepage URL):
npx shadcn@latest add https://void.ui.unsanity.ai

6. Import styles in globals.css

/* app/globals.css */
@import "../components/void/styles.css";

7. Wrap your app

// app/layout.tsx
import { MotionProvider } from "@/components/void/provider/motion-provider";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MotionProvider>{children}</MotionProvider>
      </body>
    </html>
  );
}

Alternative — npm package

npm install @unsanity/void gsap @gsap/react

Alternative — layout with npm package

import { MotionProvider } from "@unsanity/void";
import "@unsanity/void/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <MotionProvider>{children}</MotionProvider>
      </body>
    </html>
  );
}