Zum Inhalt springen
UI Kit
Accent

Team Sections für React und Tailwind

Die Menschen hinter der Arbeit, vom Porträtraster bis zu Bereichen, mit Platz für offene Stellen.

8 Variants
Kategorie wechseln

Gesichter, Rollen und offene Stellen

Menschen kaufen bei Menschen, und eine Team Section zeigt, wer hinter der Arbeit steht. Die acht Layouts hier nehmen Namen, Rollen, Fotos und Links als Daten und halten jedes Porträt im selben Rahmen. So wirkt eine Mischung aus Handyfotos und Studioaufnahmen trotzdem wie ein Team.

Raster und Karten zeigen ein Team von vier bis zwanzig Personen. „Liste“ und „Kompakt“ passen zu größeren Teams oder einem Vorstand, wo Namen mehr zählen als Gesichter. „Eine Person vorn“ stellt die Gründerin oder den Praxisinhaber nach vorn. „Bereiche“ gruppiert nach Teams für Firmen mit Struktur, das Karussell spart Höhe, „Mit Stellenkarte“ ergänzt eine Kachel zu offenen Stellen.

Nimm Porträts mit gleichem Ausschnitt und ruhigem Hintergrund. Eine kurze Zeile dazu, was die Person für Kunden tut, sagt mehr als ein Jobtitel. Bei Praxen und Agenturen verlinkst du jede Person auf ihre Seite, das hilft auch allen, die nach einem Namen suchen.

Team

Raster

Porträts in einem ruhigen Raster, Name und Rolle darunter.

Im Studio öffnen

Karten

Eine Karte je Person mit kurzer Beschreibung, Ort und Links.

Im Studio öffnen

Liste

Ein Verzeichnis mit Bereich und Ort, auf dem Telefon gestapelt.

Im Studio öffnen

Mit Stellenkarte

Das Raster endet mit einer Einladung, dazuzukommen.

Im Studio öffnen

Kompakt

Ein Team in einer Karte, für Über-uns-Seiten und das Ende einer Geschichte.

Im Studio öffnen

Bereiche

Menschen nach Bereichen gruppiert, jeder mit einem Satz zu seiner Aufgabe.

Im Studio öffnen

Details

Was Team mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
8
Version
1.0.0 · seit 1.0.0
Datei
components/ui/team.tsx
Bringt mit
utilskitbuttoniconsectionreveal
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 15 eigene Texte
Studio
Alle 8 Variants bearbeitbar
In Sammlungen
Arztpraxis
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle TeamProps aus components/ui/team.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • 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 }

Eingebaute Texte

Diese Texte schreibt Team selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 15 Texte anzeigen
previousEnglisch Previous peopleDeutsch Vorherige Personen
nextEnglisch Next peopleDeutsch Nächste Personen
teamEnglisch TeamDeutsch Team
peopleEnglisch {n} peopleDeutsch {n} Personen
personEnglisch {n} personDeutsch {n} Person
rolesEnglisch {n} open rolesDeutsch {n} offene Stellen
roleEnglisch {n} open roleDeutsch {n} offene Stelle
viewRolesEnglisch View open rolesDeutsch Offene Stellen ansehen
restEnglisch The rest of the teamDeutsch Der Rest des Teams
moreEnglisch +{n}Deutsch +{n}
nameEnglisch NameDeutsch Name
departmentEnglisch TeamDeutsch Bereich
locationEnglisch LocationDeutsch Ort
linksEnglisch LinksDeutsch Links
aboutEnglisch About {name}Deutsch Über {name}

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Team reagiert selbst auf die Tasten Pfeil links, Pfeil rechts und Leertaste.
  • Setzt aria-expanded und aria-label, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rolle region.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 12 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Team?

Mit aiw add @ai-website/team. Der Befehl legt die Datei components/ui/team.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, section und reveal. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Team?

8 Varianten, Raster, Karten, Liste, Eine Person vorn, Karussell, Mit Stellenkarte, Kompakt und Bereiche. Du wählst sie mit der Prop variant, zum Beispiel variant="cards".

Kann ich die Texte von Team übersetzen?

Ja. Team bringt 15 eigene Texte auf Deutsch und Englisch mit, etwa „Vorherige Personen“, „Nächste Personen“ und „Team“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Team einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Team mit aiw_components und installieren sie mit aiw_add @ai-website/team. Nenn im Prompt die Variante, etwa variant="grid", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Team ohne Code anpassen?

Ja, im Studio. Alle 8 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Team-Code zum Kopieren.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Team stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert