Shadcn.io is not affiliated with official shadcn/ui
About Team Mosaic
An asymmetric team mosaic grid block for React and Next.js with featured member highlights, role badges, fun facts, department grouping, and staggered scale entrance animations built with shadcn/ui and Tailwind CSS
Showcase your team's personality with this asymmetric mosaic grid block for React and Next.js. Features 10 team member cells in a bento-style layout with 3 featured members spanning multiple columns, role badges, fun facts, department indicators, and staggered scale entrance animations. Built with TypeScript, shadcn/ui Badge component, motion/react animations, and Tailwind CSS. Perfect for about pages, culture showcases, and team introduction sections.
Related Components
Team Grid
Standard team member card grid
Team Avatars
Compact avatar-based team display
Team Voices
Team member quote carousel
Team Growth
Team size growth over time
Team Breakdown
Team composition by department
Employee Spotlights
Featured team member stories
FAQ
Was this page helpful?
Sign in to leave feedback.
Team Growth
A team growth data table block for React and Next.js with year-over-year department headcounts, color-coded growth badges, CAGR calculation, sortable columns, and staggered row entrance animations built with shadcn/ui and Tailwind CSS
Team Voices
A team member quote carousel block for React and Next.js with prev/next navigation, department badges, tenure display, animated slide transitions, and dot indicators built with shadcn/ui and Tailwind CSS