Skip to content

Draggable Canvas

An endless canvas of project tiles you drag, flick, scroll or arrow around, the award-site signature. Without JavaScript it’s a plain grid.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/draggable-canvas
First time? Add the @portfolio-kit registry to components.json
components.json
{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Usage

Examples

Bounded

wrap={false} makes a finite board that bounces softly at its edges, and wheel={false} lets the page keep scrolling over it. Here in a card, with landscape tiles.

API Reference