Installation

The Adventureland components are distributed through a custom shadcn registry namespaced @adv. Point your project at it once, then add any component by name.

1. Configure the registry

Add the @adv registry to your project's components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "registries": {
    "@adv": "https://ui-registry.adventureland.io/r/{name}.json"
  }
}

The registry is hosted at ui-registry.adventureland.io — the same site as these docs. For local development against a checkout of the registry, run the docs/registry app with next dev and point @adv at http://localhost:3000/r/{name}.json.

Without configuring components.json

You can also install any item by its full URL — no @adv registry entry required:

npx shadcn@latest add https://ui-registry.adventureland.io/r/cyberpunk-text.json

The full registry index (every item) is published at /r/registry.json, and each item is served as a standalone shadcn registry-item file at /r/<name>.json with permissive CORS.

2. Add the theme base

Most components reference the shared theme tokens and the cn utility. Install the base item first so they render with the intended light/dark palette:

npx shadcn@latest add @adv/base

This adds lib/utils.ts and injects the theme CSS variables (--text-primary, --button-primary-bg, …) into your global stylesheet.

3. Add components

npx shadcn@latest add @adv/cyberpunk-text
npx shadcn@latest add @adv/text-scramble @adv/loader

Internal dependencies resolve automatically: composed items pull their child @adv components, and components that build on shadcn primitives (button, badge, hover-card) pull those from the default registry.

Requirements

• Tailwind CSS v4 (CSS-based config). Theme tokens are delivered as cssVars.
• React 19 / Next.js App Router. Several components are client components and a few use next/navigation, next/image, or next-themes.
• Some components bring npm dependencies (gsap, three, framer-motion, howler, sonner) — the CLI installs them for you.