# Card Shelf

> Cards slide in from the right and settle onto a receding shelf, the front card playing its own content as it lands.

- Collection: Illustrations
- Tier: pro
- Docs: https://geturui.com/docs/card-shelf
- Install: `npx shadcn@latest add @geturui-pro/card-shelf`
- Dependencies: motion

## Variants

### Data sources

Database, sheet, API, storage and webhook cards stack up while the front one syncs.

Install: `npx shadcn@latest add @geturui-pro/card-shelf-data-sources`

```tsx
import { CardShelfDataSources } from "@/components/illustrations/card-shelf/data-sources";

export function DataSourcesIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <CardShelfDataSources className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (2.4 seconds per card at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Prompt design

System, context, examples, rules and output blocks stack up with glowing template variables.

Install: `npx shadcn@latest add @geturui-pro/card-shelf-prompt-design`

```tsx
import { CardShelfPromptDesign } from "@/components/illustrations/card-shelf/prompt-design";

export function PromptDesignIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <CardShelfPromptDesign className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (2.4 seconds per card at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

### Quality evals

Eval run cards stack up while the front card fills its score ring and ticks through checks.

Install: `npx shadcn@latest add @geturui-pro/card-shelf-quality-evals`

```tsx
import { CardShelfQualityEvals } from "@/components/illustrations/card-shelf/quality-evals";

export function QualityEvalsIllustration() {
  return (
    <div className="rounded-xl border border-border bg-surface p-4">
      <CardShelfQualityEvals className="w-full" />
    </div>
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| speed | `number` | 1 | Speed multiplier for the loop (2.6 seconds per card at 1). |
| title | `string` | — | Accessible description of the scene, used as the aria-label. |
| className | `string` | — | Classes for the SVG; it fills its container width and keeps its ratio. |

## Accessibility

- Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
- Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
- Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.