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, and it adopts your branding automatically through semantic design tokens.

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.

How the registry works

Installing a section copies real source files into your project:

• the section itself lands in components/sections/<name>.tsx, fully typed and yours to edit
• shared animation presets land in lib/motion.ts, FX components (marquee, reveal, maps, shader backgrounds) in components/ludus/
• the shadcn primitives a section uses (button, accordion, input, …) and npm packages (motion, lucide-react) install automatically as dependencies

Sections import nothing from next/*: they work the same in Next.js and in plain Vite/React apps. Colors come only from semantic tokens (bg-primary, text-muted-foreground, …), so every section follows your brand in both light and dark theme with zero edits.

Browse the sections

The catalog holds 104 sections in 25 categories, organized into four shelves:

• Websites: navbar, hero, features, pricing, testimonials, FAQ and everything else a marketing site needs
• Shop: product, collection, cart, checkout and promo sections for small stores
• Apps: booking flows for services and appointments
• Animated backgrounds: full-bleed shader backgrounds that sit behind any hero

Every section page shows a live preview (light or dark, with your pick of accent color), the full TSX source, the install command and a ready prompt you can paste into an AI agent. The Great for line names the industries the section fits.

Browse all sections

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 */
}

The theme configurator builds the whole token set for you. Pick a primary and a secondary color, corner roundness, heading and body fonts from a curated Google Fonts list and an icon library (Lucide, HugeIcons or Phosphor), and watch every choice live on a real mini site.

You leave with two artifacts:

• Copy CSS: the token block to paste into app/globals.css. Every installed section follows instantly.
• BRANDING.md: a brief for an AI agent with your tokens, the next/font setup and the icon package, so it applies the same branding across the whole project.

Templates: whole sites, ready to assemble

Twelve curated lineups stack our sections into complete sites for real businesses. Each template page renders the full site section by section and downloads as a TEMPLATE.md brief: hand it to an AI agent and it installs the listed sections from the registry and assembles the same site.

The flow:

1. Pick a template and preview the whole page.
2. Download TEMPLATE.md and hand it to your AI agent.
3. Apply your branding from the theme configurator (step above).

Browse all templates

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.

Three artifacts on this site are made for agents: the copy-prompt button on every section page, BRANDING.md from the configurator and TEMPLATE.md from every template. Together they describe what to install, how to brand it and how to assemble it.

Google Maps

Contact sections with a location (contact-01, contact-02) embed a real Google map when you provide a Maps Embed API key, and fall back to a decorative SVG map when you do not. Nothing breaks either way, and the Embed API is free with no usage cap.

To enable real maps, set NEXT_PUBLIC_GOOGLE_MAPS_EMBED_KEY:

1. Create a key in Google Cloud Console: enable the Maps Embed API, then create an API key.
2. Restrict it to your domains (Websites restriction): the key ships in the page HTML, so the referrer restriction is the protection.
3. Add it to .env.local:

   NEXT_PUBLIC_GOOGLE_MAPS_EMBED_KEY=your-key