Before After

Comparison slider for redesigns. Drag, click or use the keyboard to wipe between two layers, horizontally or vertically.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/before-after

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"
  }
}

Wipe top to bottom with custom chip labels, for tall screens or two versions of an identity.

Layers can hold any markup, not just images. Here a wireframe wipes into the finished screen.