Browse docs

Window Stories

3 variantsPro

A compact app window plays a short product story on a loop: content arrives, transforms and settles before it resets.

illustrationsvgappwindowproductheroloopai

Brief to plan

brief-to-plan.tsx

Brief lines get highlighted, then plan tasks and timeline bars stack in on the right.

$npx shadcn@latest add @geturui-pro/window-stories-brief-to-plan

Prop	Type	Default	Description
`speed`	`number`	`1`	Speed multiplier for the loop (seven seconds 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.

chat-assistant.tsx

A question is typed and sent, the assistant types, streams a reply and attaches a card.

$npx shadcn@latest add @geturui-pro/window-stories-chat-assistant

Prop	Type	Default	Description
`speed`	`number`	`1`	Speed multiplier for the loop (eight seconds 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.

analytics.tsx

KPI tiles settle in, a trend line draws itself and a crosshair scrubs along it.

$npx shadcn@latest add @geturui-pro/window-stories-analytics

Prop	Type	Default	Description
`speed`	`number`	`1`	Speed multiplier for the loop (six seconds 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 window stories 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/window-stories

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.