Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/core-value-stats"use client";
import CoreValueStats, { CoreStat } from "@/components/ui/core-value-stats";
export default function CoreValueStatsDemo() {
const stats: CoreStat[] = [
{
value: "8+",
label: "Years of Innovation",
description: "Over eight years of building design systems that empower developers and designers.",
},
{
value: "32+",
label: "Industries Served",
description: "From fintech to healthcare, we build adaptive digital frameworks for every challenge.",
},
{
value: "20+",
label: "Creative Partners",
description: "We work with studios and startups to transform bold ideas into exceptional results.",
image: "https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/abstract-bg_11zon.jpg",
},
{
value: "19+",
label: "Expert Teams",
description: "A collective of engineers, designers, and strategists united by a shared goal.",
},
{
value: "100+",
label: "Delivered Projects",
description: "Every launch is proof of our dedication to craft, performance, and seamless user experience.",
},
];
return <CoreValueStats stats={stats} />;
}