Shadcn.io is not affiliated with official shadcn/ui
About Impact
An asymmetric bento grid impact metrics block for React and Next.js with featured stat cells, semantic color categories, context lines, computed totals, and staggered scale entrance animations built with shadcn/ui and Tailwind CSS
Showcase measurable social and business impact with this asymmetric bento grid block for React and Next.js. Features seven impact metrics in an asymmetric grid layout with two featured cells spanning two columns, semantic color coding for environment, community, and business categories, context detail lines, and staggered scale entrance animations. Built with TypeScript, shadcn/ui Badge component, motion/react animations, and Tailwind CSS. Perfect for CSR pages, annual report highlights, and purpose-driven brand about sections.
Related Components
Sustainability
Environmental sustainability initiatives
Charity Giving
Charitable donations and giving programs
Community Stats
Community engagement metrics
Open Metrics
Transparent company metrics
Commitments
Company commitments and pledges
By the Numbers
Key company statistics overview
FAQ
Was this page helpful?
Sign in to leave feedback.
Image Overlay
An image overlay card block for React and Next.js with a placeholder visual area, overlaid tagline and description text, a CTA button, and smooth fade entrance animations built with shadcn/ui and Tailwind CSS
Industries Served
A multi-column industry grid block for React and Next.js with six industry cards, customer counts, key use cases, featured customer names, hover states, and staggered scale entrance animations built with shadcn/ui and Tailwind CSS