A draggable, keyboard accessible before and after slider with two illustrated kitchen scenes, caption chips and a strip of project results.
Hollis & Co. Renovation
A 1987 galley kitchen in Cobble Hill, opened up with sage cabinetry, white oak and three warm pendants. Drag to compare.
Book a free home visit
npx shadcn@latest add https://hyperblur.dev/r/local-before-after.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/local-before-after.tsx.
import { LocalBeforeAfter } from "@/components/hyperblur/local-before-after"
<LocalBeforeAfter defaultValue={50} beforeLabel="Day one" afterLabel="Week six" />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Hollis & Co. Renovation" | Small line above the heading. |
| title | string | "Same kitchen. Whole new morning." | Heading. |
| subtitle | string | "A 1987 galley kitchen ..." | Paragraph beside the heading. |
| beforeLabel | string | "1987 original" | Caption on the before side. |
| afterLabel | string | "Six weeks later" | Caption on the after side. |
| before | ReactNode | Custom before layer, such as an img with object-fit cover. Defaults to the illustrated old kitchen. | |
| after | ReactNode | Custom after layer. Defaults to the illustrated new kitchen. | |
| value | number | Controlled divider position from 0 to 100. | |
| defaultValue | number | 46 | Initial divider position when uncontrolled. |
| onChange | (value: number) => void | Called while dragging or using the arrow keys. | |
| stats | { value: string; label: string }[] | 4 results | Results strip under the slider. Empty hides it. |
| cta | { label: string; href: string } | { label: "Book a free home visit", href: "#visit" } | Button beside the heading. |
| accent | string | "#d9a35b" | Accent color used for highlights, selected states and buttons. |
| className | string | Extra classes on the section root. | |
| style | React.CSSProperties | Inline styles on the section root. |