Getting started

PixelDosa UI 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 UI 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.akshayjayan.com/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.

Run this step explicitly, even though every component lists the theme as a dependency. When a component pulls it in, shadcn adds the motion tokens but keeps any colours your project already defines, so an existing palette wins. Installing the theme directly replaces those colours with PixelDosa UI's, which are tuned to meet WCAG AA contrast in light and dark mode. Skip it if you want to keep your own palette.

npx shadcn@latest add @pixeldosa/pixeldosa-theme

4. Add a component

npx shadcn@latest add @pixeldosa/button

Building with an AI agent?

Install the agent guide so your coding agent uses PixelDosa UI the way it's meant to be used, then connect the shadcn MCP server. Set up Claude Code, Cursor or any agent.

npx shadcn@latest add @pixeldosa/pixeldosa-agent-guide