How do I install Stats With Gradient?

Run npx shadcn@latest add @aceternity/stats-with-gradient in your terminal. Before installing, add the Aceternity Pro registry to your components.json and set your API token as the ACETERNITY_PRO_TOKEN environment variable. The CLI automatically installs all required dependencies including Tailwind CSS plugins and Framer Motion.

Is Stats With Gradient responsive and accessible?

Yes. The component is fully responsive across mobile, tablet, and desktop breakpoints. It uses semantic HTML elements, proper heading hierarchy, and accessible color contrast ratios. Touch targets are appropriately sized for mobile interactions, and all interactive elements are keyboard-navigable.

Can I customize the colors, fonts, and layout?

Everything is built with Tailwind CSS utility classes and Framer Motion animations. You can change colors, spacing, typography, border radius, shadows, and animation timing directly in the JSX — no separate CSS files to manage. The component uses your project's Tailwind theme, so it automatically adapts to your design system.

What frameworks does this work with?

Stats With Gradient is built for React and Next.js (App Router and Pages Router). It requires Tailwind CSS v4 and Framer Motion. It works with any React-based framework including Remix, Gatsby, and Vite — just ensure Tailwind CSS and Framer Motion are configured in your project.

Stats Sections

2 / 4

Stats With Gradient

A four-column stats grid with glassmorphism cards. Features an animated purple gradient beam at the bottom and decorative SVG bar patterns.

Trusted by fighters all over the world

We are a team of experienced fighters and boxers who are passionate about helping you grow your business.

10+

Years in the business trying to build this up.

100k+

People Fought trying to establish our brand.

100%

Fight Club Attendance so that everyone knows the first rule.

100+

Spent fighting in the ring, only to forget after.

Four stat cards arrange in a responsive grid on a rounded container with a subtle background. Each card uses backdrop-blur for a glassmorphism effect and displays a large value with description.

At the bottom, a gradient beam component creates a purple glow using blur-3xl. On hover over the container, the beam shifts upward and increases blur for a more dramatic effect.

Decorative SVG bars with a mask gradient overlay the entire section, adding texture without obscuring content. The z-index layering keeps cards above decorative elements.

Good for modern landing pages, creative portfolios, agency sites, or anywhere you want stats to feel dynamic and visually engaging.

More from Stats Sections

Included with All-Access

One payment unlocks the code for this block and every other block, template and page.

Get All-Access

Explore more

Stats With Grid Background Stats With Number Ticker Stats For Changelog Stats Sections Backgrounds

About this block

Four stat cards arrange in a responsive grid on a rounded container with a subtle background. Each card uses backdrop-blur for a glassmorphism effect and displays a large value with description.

At the bottom, a gradient beam component creates a purple glow using blur-3xl. On hover over the container, the beam shifts upward and increases blur for a more dramatic effect.

Decorative SVG bars with a mask gradient overlay the entire section, adding texture without obscuring content. The z-index layering keeps cards above decorative elements.

Good for modern landing pages, creative portfolios, agency sites, or anywhere you want stats to feel dynamic and visually engaging.