Infinite Canvas
Infinite draggable canvas with zoomable, repeating cards and touch/mouse controls.
Drag to pan • Scroll to zoom
100%
Installation
npx shadcn@latest add https://scrollxui.dev/registry/infinite-canvas.json Usage
import { Card, InfiniteCanvas } from "@/components/ui/infinite-canvas"; <InfiniteCanvas
className="relative h-[450px] w-full"
showControls={true}
showZoom={true}
showStatus={true}
showInstructions={true}
>
<Card className="bg-card p-6 rounded-lg shadow-lg border h-full">
<p className="text-foreground">
Card 1
</p>
</Card>
<Card className="bg-card p-6 rounded-lg shadow-lg border h-full">
<p className="text-foreground">
Card 1
</p>
</Card>
<Card className="bg-card p-6 rounded-lg shadow-lg border h-full">
<p className="text-foreground">
Card 1
</p>
</Card>
</InfiniteCanvas>API Reference
Infinite Canvas
Infinite draggable canvas with zoomable, repeating cards and touch/mouse controls.