Browse components
Infinite Canvas
A bounded moodboard-style canvas on a dotted grid: drag to pan with inertia, scroll or pinch to zoom around the pointer, keyboard friendly.
Installation
npx shadcn@latest add @glint-ui/infinite-canvasFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/infinite-canvas.json
Usage
import { InfiniteCanvas } from "@/components/ui/infinite-canvas";
<div className="h-[600px]">
<InfiniteCanvas
items={[
{ id: "a", x: 0, y: 0, content: <Card title="Start here" /> },
{ id: "b", x: 400, y: 120, content: <img src="/shot.jpg" alt="" /> },
]}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ReactNode | — | Array of { id, x, y, content }, positioned by their center in world px. |
| defaultZoom | number | 0.8 | Zoom at first render and on reset. |
| minZoom | number | 0.3 | Smallest zoom. |
| maxZoom | number | 2.5 | Largest zoom. |
| worldWidth | number | 2400 | World width in px; panning stops at its edges. |
| worldHeight | number | 1600 | World height in px. |
| gridGap | number | 24 | Px between grid dots at 100%. |
| dotSize | number | 1.1 | Grid dot radius in px. |
| inertia | boolean | true | Glide after a flick. |
| showControls | boolean | true | Show the zoom buttons. |
| label | string | — | Accessible name for the canvas. |
| className | string | — | Extra classes for the root element. |