Usage
import { DesignTweak } from "@/registry/components/design-tweak/design-tweak";
<DesignTweak before={<span>…</span>} after={<span>…</span>} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
before | ReactNode | { src: string; alt?: string } | Left / "before" side: image URL or a React node | |
after | ReactNode | { src: string; alt?: string } | Right / "after" side | |
title? | string | "Remove first" | Caption above the compare |
subtitle? | string | Small text under the title | |
beforeLabel? | string | "Before" | Labels on the before / after corners |
afterLabel? | string | "After" | |
removed? | DesignTweakChange[] | [] | What was removed in this pass |
removedTitle? | string | "What I removed" | Heading over the removed list |
mode? | "slider" | "toggle" | "slider" | Compare interaction: drag a divider, or a toggle that swaps sides |
defaultPosition? | number | 52 | Initial slider position 0–100 (slider mode) |
defaultShowAfter? | boolean | false | Start showing the after side (toggle mode) |
className? | string |
When to use
Showing a design cleanup or "remove first" pass: a before/after of the same screen, with a short list of what you cut.
When not to use
General image comparison without a change list (build a plain slider); metric diffs over time (use change-summary); a full multi-state QA gallery (use state-catalog).