# Product Image Card

> The ProductImageCard component is a modern, interactive product viewer built entirely with shadcn/ui components. It presents a clean, mobile-inspired layout featuring a main product image and a vertical carousel of selectable thumbnails. Users can switch between product views using the thumbnail list or next/previous buttons, offering an intuitive browsing experience similar to e-commerce detail pages. The design is fully responsive, adapting seamlessly across devices, and maintains accessibility with keyboard navigation and focus states. With configurable titles, images, and controls, this component provides an elegant, reusable way to showcase products or visual assets in any modern interface.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: next, lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/product-image-card

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/product-image-card?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt