KQ-067 · SLICE/COMPARE
Slice Compare
A comparison divider struck as a blade — it leans into the cut as you drag and swings back plumb on release, parting two scenes with cast shadows on both sides of the edge.
KQ-067 · SLICE/COMPARE
SIGNAL SPLIT · A/B
KQ-067
BLADE · 050%
Drag the blade - it leans into the cut and swings back plumb.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/slice-compare
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| before / after | ReactNode / ReactNode | — | The two scenes either side of the blade. |
| beforeLabel / afterLabel | string / string | — | Corner labels and the slider valuetext. |
| defaultPosition / onPositionChange | number / (position) => void | — | Starting cut position (0-100) and the change callback. |
| height | number | 220 | Stage height in px. |