Docs

LudusVibe UI is a shadcn-compatible registry of full landing-page sections. You install source code, not a dependency — every section is yours to edit.

Quick start

1. Set up shadcn in your project (skip if already done):

   npx shadcn@latest init -d

2. Register the @ludusvibe namespace in your components.json:

   {
     "registries": {
       "@ludusvibe": "https://ui.ludusvibe.com/r/{name}.json"
     }
   }

3. Install any section:

   npx shadcn@latest add @ludusvibe/hero-01

   The CLI copies the section to components/sections/ and installs everything it needs — shared animation presets, FX components, shadcn primitives and npm packages.

Branding

Sections use semantic tokens only (bg-primary, text-muted-foreground, …), so they adopt your brand from CSS variables — no code changes. Set your tokens once in globals.css:

:root {
  --primary: oklch(0.55 0.25 290);          /* your brand color */
  --primary-foreground: oklch(0.98 0.01 290);
  --radius: 0.75rem;                        /* your corner style */
}

Generate a full token set from your brand color on the theme configurator.

Use with AI agents (MCP)

Because this is a standard shadcn registry, AI agents can browse and install sections through the shadcn MCP server. With the namespace registered in components.json, run:

npx shadcn@latest mcp init

Then ask your agent things like "add the @ludusvibe pricing section with a billing toggle" — it will find and install it.