Shadcn.io is not affiliated with official shadcn/ui
Hero Split Avatar Grid
A split-layout hero with a 2x2 circular avatar grid for React and Next.js featuring a headline, subtitle, team metadata, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS
Build a split-layout hero with a 2x2 avatar grid using this React and Next.js block. Features a bold two-line headline, supporting subtitle, dual ShadcnioButton CTAs with a sliding arrow effect on hover, and a metadata microcopy line on the left, paired with a 2x2 grid of circular avatar placeholders on the right displaying names and roles beneath each circle. Built with TypeScript, ShadcnioButton, motion/react staggered entrance animations, Lucide React icons, and Tailwind CSS. Perfect for about pages, team pages, agency websites, and any brand where showing the humans behind the product builds trust and credibility.
Related Components
Avatar Group Hero
Hero with avatar group display and social proof
Testimonial Hero
Hero with customer testimonial quote
Founder Note Hero
Hero with founder note and personal message
Social Proof Bar Hero
Hero with social proof bar and avatar stack
Trusted By Hero
Hero with trust indicators and logo cloud
Split Image Hero
Hero with split image layout using Tailwind CSS grid
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Architecture Diagram
A split-layout hero with an animated SVG architecture diagram of service nodes and dashed edges for React and Next.js featuring an announcement pill, emerald checklist, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS
Split Calendar Booking
A split-layout hero with a calendar booking widget mockup showing month label, weekday strip, and time slot pills for React and Next.js featuring an announcement pill, feature checklist, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS