# Installation — PixelPapa UI docs

Two minutes from an empty project to your first animated component.

## 1. Start with a Tailwind project

Any React framework works: Next.js, Vite, React Router, Astro. If you have not set up shadcn yet, initialise it once; it adds the theme tokens and the `cn` helper the components rely on.

```bash
npx shadcn@latest init
```

## 2. Add a component

Every component page shows its own command, for example:

```bash
npx shadcn@latest add "https://pixelpapa.com/r/magnetic-button.json"
```

The CLI writes the file to `components/pixelpapa/` and installs `motion` and `lucide-react` if the component needs them.

## 3. Use it

```tsx
import { MagneticButton } from "@/components/pixelpapa/magnetic-button";

export default function Page() {
  return <MagneticButton>Start building</MagneticButton>;
}
```

Each file also default-exports a demo. Keep it as a reference or delete it once the component is wired in.

## Shorter commands with a namespace

Add the registry to `components.json` once, then install by name with `npx shadcn@latest add @pixelpapa/magnetic-button`:

```json
{ "registries": { "@pixelpapa": "https://pixelpapa.com/r/{name}.json" } }
```

## Pro components

Pro components and site templates need a Pro or Scale plan. The CLI authenticates with an API key:

1. Create a key at https://pixelpapa.com/settings and save it in your project's `.env.local` as `PIXELPAPA_API_KEY=pp_live_…`.
2. Add the registry with the key to `components.json`:

```json
{
  "registries": {
    "@pixelpapa": {
      "url": "https://pixelpapa.com/r/{name}.json",
      "headers": { "Authorization": "Bearer ${PIXELPAPA_API_KEY}" }
    }
  }
}
```

3. Install any component by name: `npx shadcn@latest add @pixelpapa/<name>`. Free components work the same way.

## Requirements

- React 18 or 19.
- Tailwind CSS v4.
- The shadcn colour tokens (`--background`, `--foreground`, `--primary`, `--muted`, `--border`, `--card` and friends). The theme generator at https://pixelpapa.com/tools/theme-builder can create a set.
- Interactive components are marked `"use client"`, so they work in React Server Component frameworks without changes.