Quick setup

Install the Ludo design system

Add Ludo components, tokens, and motion to any shadcn project in four steps. Everything installs through the shadcn CLI from the @ludo registry.

Prerequisite: a shadcn/ui project running on Tailwind v4. If you have not set one up yet, run npx shadcn@latest init first, then come back here.

Add the @ludo registry to components.json

Point the shadcn CLI at the Ludo registry so it can resolve @ludo/* items. Add the registries block to your project root components.json.

components.jsonjson

{
  "registries": {
    "@ludo": "https://ui.ludo.computer/r/{name}.json"
  }
}

Install the theme

Add the theme first. It writes the colour, radius, shadow, and motion tokens, the motion variables and keyframes, the global reduced-motion policy, and the data-foundation admin and vendor re-skin hooks. Every component depends on these tokens, so it must come before anything else.

npx shadcn@latest add @ludo/theme

Add the components you need

Add components one at a time or in a batch. The CLI pulls each component plus its registry dependencies into @/components/ui.

npx shadcn@latest add @ludo/stat-card @ludo/data-table @ludo/callout

Use it

Import from @/components/ui/* like any other shadcn component. The tokens drive colour and motion, so the result is on brand with no extra config.

overview.tsxtsx

import { StatCard } from "@/components/ui/stat-card";
import { Callout } from "@/components/ui/callout";

export function Overview() {
  return (
    <div className="grid gap-4 sm:grid-cols-2">
      <StatCard
        label="Transactions today"
        value={128_402}
        delta="+12%"
        deltaLabel="than yesterday"
      />
      <Callout variant="info" title="Gate 4 is busy">
        Throughput is holding at 89% self-service.
      </Callout>
    </div>
  );
}

Important notes

Three things to keep in mind

CSS-first, no forced animation runtime. Motion ships as CSS keyframes and plain token data. There is no framer-motion dependency, so the kit drops into any project without a new runtime.
Weight is capped at 600. The theme remaps bold and extrabold down to 600, so nothing renders heavier than semibold. Headings default to 500.
Admin and vendor reskin via data-foundation. Wrap a subtree in data-foundation="vendor" to flip the primary surfaces to amber for vendor screens, while the rest of the app stays Ludo purple.

What's next

Browse the rest of the system from here.

Components

Every registry item, grouped by type, with its install command.

Brand assets

Logos, naming rules, clear space, and partner placement.

Tokens

Colour, radius, shadow, spacing, and motion tokens.