Skip to content
UI Kit
Accent color

Team sections for React and Tailwind

The people behind the work, from portrait grids to departments, with a place for open roles.

8 variants
Switch category

Faces, roles and open positions

People buy from people, and a team section shows who is behind the work. The eight layouts here take names, roles, photos and links as data and keep every portrait in the same frame, so a mix of phone photos and studio shots still looks like one team.

Grid and Cards show a team of four to twenty. List and Compact suit larger teams or a board, where names matter more than faces. Featured person puts the founder or the head of a practice first. Departments groups people by team for companies with structure, Carousel saves height, and With hiring card adds a tile that leads to open roles.

Use portraits with the same crop and a calm background. A short line about what each person does for the customer says more than a job title. For practices and agencies, link each person to their page, that also helps people who search for a name.

Team

Grid

Portraits in a calm grid, name and role below.

Open in Studio

Cards

One card per person with a short bio, location and links.

Open in Studio

List

A directory with team and location, stacked on phones.

Open in Studio

With hiring card

The grid ends on an invitation to join.

Open in Studio

Compact

A team in one card, for about pages and footers of a story.

Open in Studio

Departments

People grouped by team, each with a sentence about what it does.

Open in Studio

Details

What Team brings along, read from the registry and the source.

Area
Content
Variants
8
Version
1.0.0 · since 1.0.0
File
components/ui/team.tsx
Brings along
utilskitbuttoniconsectionreveal
npm packages
None
Languages
English and German, 15 texts of its own
Studio
All 8 variants editable
In collections
Medical practice
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The TeamProps interface from components/ui/team.tsx, with the comments from the code.

  • variantoptional
    TeamVariant

    gridcardslistfeaturedcarouselwith-hiring-cardcompactdepartments

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • membersoptional
    TeamMember[]
  • departmentsoptional
    TeamDepartment[]

    Order and descriptions for the departments variant. Without it, departments come from the members.

  • hiringoptional
    TeamHiring

    For with-hiring-card

  • totaloptional
    number

    Total team size for compact, when more people exist than are shown

  • actionoptional
    { label: string; href: string }

Built-in texts

Team writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 15 texts
previousEnglish Previous peopleGerman Vorherige Personen
nextEnglish Next peopleGerman Nächste Personen
teamEnglish TeamGerman Team
peopleEnglish {n} peopleGerman {n} Personen
personEnglish {n} personGerman {n} Person
rolesEnglish {n} open rolesGerman {n} offene Stellen
roleEnglish {n} open roleGerman {n} offene Stelle
viewRolesEnglish View open rolesGerman Offene Stellen ansehen
restEnglish The rest of the teamGerman Der Rest des Teams
moreEnglish +{n}German +{n}
nameEnglish NameGerman Name
departmentEnglish TeamGerman Bereich
locationEnglish LocationGerman Ort
linksEnglish LinksGerman Links
aboutEnglish About {name}German Über {name}

Accessibility

Read from the source of the component.

  • Team handles the keys Arrow left, Arrow right and Space itself.
  • Sets aria-expanded and aria-label, so screen readers announce purpose and state.
  • Uses the role region.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 12 places in the code switch motion off then.

Frequent questions

How do I install Team?

With aiw add @ai-website/team. The command puts components/ui/team.tsx into your project, the code is yours from then on. It brings along button, icon, section and reveal. It needs no further npm packages.

Which variants does Team have?

8 variants, Grid, Cards, List, Featured person, Carousel, With hiring card, Compact and Departments. You pick one with the variant prop, for example variant="cards".

Can I translate the texts of Team?

Yes. Team carries 15 texts of its own in English and German, such as “Previous people”, “Next people” and “Team”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Team?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Team with aiw_components and install it with aiw_add @ai-website/team. Name the variant in your prompt, for example variant="grid", and the assistant writes your content straight into the props.

Can I adjust Team without code?

Yes, in the Studio. All 8 variants are editable there, texts, lists and switches. The Studio writes the matching Team code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Team on a page.

Often searched

Jump to

Copied to the clipboard