Shadcn.io is not affiliated with official shadcn/ui
About Diversity
A diversity and inclusion bento grid block for React and Next.js with asymmetric stat cells, trend indicators, initiative cards, and scale entrance animations built with shadcn/ui and Tailwind CSS
Demonstrate your commitment to building an inclusive workplace with this diversity bento grid block for React and Next.js. Features an asymmetric grid layout with a prominent diversity statement cell, granular stat cells with trend indicators for gender ratio, ethnic diversity, age range, accessibility score, and pay equity, plus detailed initiative cards. Built with TypeScript, shadcn/ui Badge component, motion/react scale animations, and Tailwind CSS. Perfect for about pages, careers sections, and corporate responsibility pages.
Related Components
Team Breakdown
Team composition by department and role
Culture
Company culture values and workplace perks
Ethical Practices
Ethical standards and responsible business practices
Employee Spotlights
Featured team member profiles and stories
Commitments
Company pledges and accountability metrics
Impact
Social and community impact measurements
FAQ
Was this page helpful?
Sign in to leave feedback.
Differentiators
A three-column competitive comparison grid block for React and Next.js with Us vs Traditional vs DIY columns, check and cross feature indicators, highlighted primary column, gap-as-border pattern, and footer summary counts built with shadcn/ui and Tailwind CSS
Employee Spotlights
An employee spotlights vertical card stack block for React and Next.js with colored accent borders, initials avatars, personal quotes, tenure badges, fun fact pills, and staggered entrance animations built with shadcn/ui and Tailwind CSS