ComponentsCarousels & media
Before and After
Two images in one frame with a divider you move to compare them.
Drag
This example uses generated pictures from this site: art.ts. Copy that file from the repository, or use your own images in its place.
"use client";
import { BeforeAfter } from "@/components/miyuki-ui/before-after";
import { landscape } from "@/registry/lib/art";
export default function BeforeAfterDemo() {
return (
<BeforeAfter
first={landscape("yotei-ridge", { mood: "day", width: 1280, height: 800 })}
second={landscape("yotei-ridge", { mood: "night", width: 1280, height: 800 })}
labels={["Noon", "Midnight"]}
className="max-w-[640px] shadow-md"
/>
);
}Autoplay and hover
This example uses generated pictures from this site: art.ts. Copy that file from the repository, or use your own images in its place.
"use client";
import { BeforeAfter } from "@/components/miyuki-ui/before-after";
import { landscape } from "@/registry/lib/art";
export default function BeforeAfterAutoplayDemo() {
return (
<BeforeAfter
first={landscape("hakuba-valley", { mood: "day", width: 1280, height: 800 })}
second={landscape("hakuba-valley", { mood: "snow", width: 1280, height: 800 })}
labels={["August", "February"]}
mode="hover"
autoplay
className="max-w-[640px] shadow-md"
/>
);
}Install
npx shadcn@latest add @miyuki-ui/before-afterThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
BeforeAfter
Prop
Type