About
A figure primitive that frames an image with a grayscale-to-color hover reveal and an overlaid caption, for blog and editorial reading layouts.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Picture to your project and fits it to your theme.
Code
How Picture is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
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://cdn.21st.dev/assets/mirror/9f/9f9d953869e8b1b03f94862aa569ea2b120b47821487e0f5ba356bbde8a3d8a4.jpg"
alt="Fog drifting over a pine forest at dawn"
transition
/>
<Picture.Caption>Gymnopédie No.1</Picture.Caption>
</Picture>
</div>
);
}
More by shoota
View all
Article
6
Header Navigation