Image compare

Drag a divider across two images to see what changed.

$npx shadcn@latest add @silicon-ui/image-compare

before aftercomparisonimage

Installation

$npx shadcn@latest add @silicon-ui/image-compare

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/image-compare/image-compare.tsx
- components/silicon-ui/image-compare/image-compare.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ImageCompare } from "@/components/silicon-ui/image-compare/image-compare";

Prop	Type	Default
`before*` The original, shown on the left (or top). Pass an image with its own alt text; it is sized to cover the frame.	`ReactNode`	—
`after*` The result, shown on the right (or bottom).	`ReactNode`	—
`position` Where the divider sits, in percent from the left (or top).	`number`	—
`defaultPosition`	`number`	`50`
`onPositionChange`	`(position: number) => void`	—
`orientation` Vertical stacks the images top and bottom. Changing it swings the divider a quarter turn instead of swapping layouts.	`"horizontal" \| "vertical"`	`"horizontal"`
`labels` Captions over each side. They fade as the divider reaches them. Pass false to hide them.	`[string, string] \| false`	`["Before", "After"]`
`label` Accessible name of the divider.	`string`	`"Before and after"`
`aspectRatio` Frame proportions, as a CSS aspect-ratio.	`string`	`"3 / 2"`
`className`	`string`	—