# Core Value Stats

> The CoreValueStats component is a responsive, modern display for showcasing key metrics or values of your company, team, or product. It supports both light and dark themes automatically, ensuring readability and aesthetic consistency across devices. Each card is rectangular, with non-image cards adapting to the theme colors, while image cards feature a full-cover background image with a semi-transparent overlay and white text for clarity. Image cards also include a subtle 3D hover effect, giving them a dynamic, interactive feel, while all cards maintain smooth animations when entering the viewport. The layout is fully responsive: on desktops, cards appear in a single horizontal row with overflow scrolling; on tablets, they wrap into multiple rows; and on mobile devices, they stack in a single column, making this component versatile for any presentation or landing page.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: next, framer-motion
- Live preview: https://21st.dev/@ruixen.ui/components/core-value-stats

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/core-value-stats?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