Getting started

PixelDosa is distributed with the shadcn registry protocol. Components are copied into your project as source you own — there is no runtime package to depend on.

1. Initialise shadcn

This creates components.json and the cn helper at @/lib/utils, which every PixelDosa component imports.

npx shadcn@latest init

2. Add the registry

Register the @pixeldosa namespace in your components.json.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "registries": {
    "@pixeldosa": "https://pixeldosa.dev/r/{name}.json"
  }
}

3. Install the theme

The theme item carries the full design and motion token set as CSS custom properties. Install it once, before your first component.

npx shadcn@latest add @pixeldosa/pixeldosa-theme

4. Add a component

npx shadcn@latest add @pixeldosa/button

Using AI tools

Point the shadcn MCP server at this registry and an agent can discover, read and install PixelDosa components directly. Each registry item carries meta.engineeringNotes and meta.motionNotes explaining not just what the component does but why it is built the way it is.

npx shadcn@latest mcp init