Image Overlay Card
Full-bleed gradient photo card whose caption slides up on hover or focus, with tag chips and a corner action.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
ImageOverlayCardProps
Also accepts all props of Omit<React.ComponentProps<"div">, "title">
| Prop | Type | Default | Description |
|---|---|---|---|
| title* required | string | — | — |
| description | string | — | — |
| tags | string[] | [] | — |
| imageClassName | string | "from-cyan-400 via-blue-600 to-indigo-900" | Tailwind gradient utilities standing in for the photo |
| actionLabel | string | "Save" | — |
| onActionChange | (active: boolean) => void | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/image-overlay-card.json