Infinite Canvas

Infinite draggable canvas with zoomable, repeating cards and touch/mouse controls.

Installation

npx shadcn@latest add @scrollxui/infinite-canvas

Usage

import { Card, InfiniteCanvas } from '@/components/ui/infinite-canvas';

<InfiniteCanvas
  className='relative h-112.5 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.

Props

Property	Type	Default	Description
`children`	ReactNode	`required`	Card components rendered infinitely across the canvas grid.
`className`	string	`-`	Additional CSS classes applied to the canvas container.
`cardWidth`	number	`280`	Fixed width of each card in pixels.
`cardHeight`	number	`220`	Fixed height of each card in pixels.
`spacing`	number	`30`	Space between cards in the infinite grid layout.
`showControls`	boolean	`true`	Show button to enable or disable canvas interaction.
`showZoom`	boolean	`true`	Display current zoom percentage indicator.
`showStatus`	boolean	`true`	Show active/inactive status badge for the canvas.
`showInstructions`	boolean	`true`	Display drag and zoom usage instructions overlay.