Components
Picture
A figure primitive that frames an image with a grayscale-to-color hover reveal and an overlaid caption, for blog and editorial reading layouts.
import { Picture } from "@/components/ui/picture";
export default function PictureDemo() {
return (
<div className="flex min-h-[420px] w-full items-center justify-center bg-background p-8 text-foreground">
<Picture className="w-full max-w-md">
<Picture.Image
src="https://images.unsplash.com/photo-1500534623283-312aade485b7?q=80&w=1200&auto=format&fit=crop"
alt="Fog drifting over a pine forest at dawn"
transition
/>
<Picture.Caption>Gymnopédie No.1</Picture.Caption>
</Picture>
</div>
);
}