Browse docs

Card Shelf

3 variantsPro

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

illustrationsvgstackcardsfeature cardloopai

Data sources

data-sources.tsx

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

$npx shadcn@latest add @geturui-pro/card-shelf-data-sources

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.tsx

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

$npx shadcn@latest add @geturui-pro/card-shelf-prompt-design

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.tsx

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

$npx shadcn@latest add @geturui-pro/card-shelf-quality-evals

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.

Installs every card shelf variant at once. Each section above has its own command for a single variant.

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/card-shelf

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.