Block
CLI registryBefore After Slider
Interactive before/after comparison.
Preview → install → use
01
Preview
npx shadcn@latest add @atroui/before-after-sliderBefore
After
Source lands in your repo. Setup: Installation · Registry catalog.
02
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | MockupVariant | 'saas' | Mockup style. |
| beforeLabel | string | 'Before' | Left label. |
| afterLabel | string | 'After' | Right label. |
Before / After