# Pro sample

Placeholder Pro item that tests licence gating on the site and the Pro registry route. Not for shipping.

Tier: pro. Type: component. Category: layout.

## Install

```bash
npx shadcn@latest add @pixilui-pro/pro-sample
```

One-time setup: add the registry to `components.json`:

```json
{
  "registries": {
    "@pixilui": "https://pixilui.com/r/{name}.json",
    "@pixilui-pro": {
      "url": "https://pixilui.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${PIXILUI_TOKEN}" }
    }
  }
}
```

Pro items need a licence. Create a token on https://pixilui.com/account and set `PIXILUI_TOKEN` in `.env.local`; the CLI sends it as a bearer header.

Files: `components/pixilui/pro-sample.tsx`.

## Preview

Live preview: https://pixilui.com/components/pro-sample

Knobs:

- `tone`: `default`, `muted`

## Code

Pro source is available to licence holders.

## Usage

When to use:

- Only to test Pro gating before the first real Pro item exists.

When not to use:

- In any app. Delete this item when the first Pro batch merges.

```tsx
import { ProSample } from "@/components/pixilui/pro-sample";

// The first option of each knob is the demo's default; the docs preview starts there.
export const knobs = {
  tone: ["default", "muted"],
} as const;

export default function ProSampleDemo({ tone = "default" }: KnobValues<typeof knobs>) {
  return <ProSample tone={tone}>Licence check passed for 3 of 3 seats on the Northwind team.</ProSample>;
}
```

## Examples

None.

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"default" \| "muted"` | `"default"` | Surface the sample sits on: the default surface or the muted one. |

Also accepts every native `<div>` attribute, and a ref to it.

## Keyboard

None.

## Accessibility

None.

## Motion

None.

## Responsive

None.

## Performance

None.

## Notes for AI

- This is a test fixture, not a component to use or reconstruct.

## Related

None.