Shadcn Team Block Six

A collaboration story block with demo stats, four rotated square photo cards, and small event captions.

Shadcn Team Block Six combines a team narrative with a photo collage. The source headline is We build together, followed by demo metrics for team members, countries, and offices. Below that, four square images are rotated like snapshots from offsites, launches, workshops, and retreats.

The metrics and captions are demo content. In a production Next.js page, replace them with real numbers or remove the stats if you cannot support them. The layout still works as a visual culture section even without numeric claims.

Layout Notes

The text block is centered in max-w-xl and separated from the collage with md:mb-24.
Stats use a three-column grid directly under the paragraph.
The photo collage starts at two columns and becomes four columns at md.
Each image card uses aspect-square, rounded corners, a border pseudo-element, grayscale styling, and a blurred color accent.

Best Fit

Use this team section on a company page, culture page, or recruiting page where you want a quick mix of scale and personality. It is more about how the team works together than who each individual member is.

What to customize first

Replace the demo stats only with numbers you can stand behind.
Swap the event captions and images for real company moments or neutral placeholders.
Keep all four images square for the intended rhythm.
Check how rotations behave near neighboring sections, especially on tablet widths.

Frequently asked questions

Is this a portrait grid?

No. It is a team culture collage with demo metrics and event-style captions.

What should I do with the stats?

Treat 42, 12, and 4 as placeholders. Replace them with real values or convert the row into short qualitative points.

Does it use JavaScript animation?

No. The movement comes from static Tailwind CSS rotation classes, not client-side animation.

Can it live on a SaaS website?

Yes. It is useful when a SaaS website wants a human company section between product, proof, and hiring content.

Related Shadcn UI blocks

Team Blocks

Start from Tailark

Preview Shadcn Team Block Six