Team Grid
Remote team grid: big initials over a duotone photo of each person's city, with bios on hover.
- Type: Team section
- Styles: Dark, Colorful
- Licence: Charcoal UI Pro
About Team Grid
Team Grid introduces people without needing headshots: each card shows large serif initials over a duotone photo of where that person works from, with their role and city, and reveals a short bio on hover or focus.
It is a full-width team section for React and Tailwind CSS 4, in a dark and colorful style. Preview it at any width above, then install it with one command.
When to use Team Grid
- Remote-first startups.
- Agencies, studios and crews.
- Clinics, gyms and studios introducing staff.
- Magazines listing contributors.
How it is built
The duotone is a grayscale image under an accent multiply layer, so the grid always matches your brand. Members take a name, role, city, bio and image.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Team Grid
Team Grid is part of 15 full templates, so you can see it in a finished page.
- Foundry template: Big agency work, small agency speed.
- Northlight template: Showreel first, everything else second.
- Fade template: Book a chair, skip the wait.
- Summit template: Memberships, classes and coaches.
- Brightside template: A dentist people don't dread.
- Keyhaven template: Homes, neighbourhoods and the people who know them.
- Fieldnotes template: Long reads, beautifully set.
- Carebridge template: See a doctor today, from your sofa.
- Trailhead template: Guided hikes, every weekend.
- Lotus template: Classes, teachers and a timetable.
- Kindred template: Find a therapist you actually click with.
- Quadrangle template: Programmes, people and open days.
- Tutorly template: The right tutor, this week.
- Patron template: Let your audience fund the work.
- Crew template: A careers page people apply from.
- Team Founders: A founders' story React section with a serif headline and milestone timeline
- Team Careers: A React careers board with team filters, remote toggle and posted salaries
- Team Values: A React company values section with huge numbered rows that open
Install Team Grid
npx shadcn@latest add @charcoal/team-gridTeam Grid is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Team Grid work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.