# E-commerce Product Detail

> Features This Product Detail component includes:  Interactive Image Gallery  Large main image with thumbnails Previous/next navigation arrows Thumbnails with active state indicator Product Information  Name, price, and rating display Tabbed content for description, details, and shipping Wishlist functionality Customization Options  Color selection with visual indicators Size selection with active states Quantity selector Purchase Actions  Add to cart button Buy now button Responsive Design  Mobile-friendly layout that adapts to different screen sizes Proper spacing and typography for all viewports Accessibility Features  Proper ARIA attributes Keyboard navigation support Focus management Screen reader friendly markup Dark Mode Support  Complete styling for both light and dark themes The component uses Tailwind CSS for styling and includes all the necessary SVG icons embedded directly in the code for portability.

- Author: [Dhileep Kumar GM](https://21st.dev/@dhileepkumargm)
- License: unknown
- Live preview: https://21st.dev/@dhileepkumargm/components/e-commerce-product-detail

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhileepkumargm/e-commerce-product-detail?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