# Bento Grid Product Hero with Live Metric Cards

> A modern, structured hero section pairing crisp value-proposition copy with an asymmetric bento grid of interactive feature cards, live status badges, and staggered Framer Motion animations.

- Author: [themeocean](https://21st.dev/@themeocean)
- License: mit
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@themeocean/components/bento-grid-product-hero-with-live-metric-cards

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/themeocean/bento-grid-product-hero-with-live-metric-cards?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