Zum Inhalt springen
UI Kit
Accent

Community

Die Menschen rund um ein Produkt. Wo sie sich treffen, mit Live-Aktivität, lokale Gruppen auf einer Karte, aktuelle Beiträge nach Thema, eine Wand der Mitglieder und ein Band zum Beitreten.

5 Variants
Kategorie wechseln

Community

Community-Hub

Die Mitgliederzahl zählt neben der Überschrift hoch, darunter die Orte zum Treffen als Karten mit Live-Aktivität. Karten heben sich, ihr Icon dreht sich beim Hover.

Im Studio öffnen

Lokale Gruppen

Gruppen als Punkte auf einer Punktkarte, groß nach Mitgliedern. Die Punkte wachsen nacheinander auf, Zeigen auf eine Stadt oder ihre Zeile hebt beide hervor.

Im Studio öffnen

Aktuelle Beiträge

Beiträge mit Thema, Autorin, Zeit und Antworten, gelöste markiert. Themen-Chips filtern die Liste, Zeilen steigen neu auf, auf dem Telefon scrollen die Chips seitlich.

Im Studio öffnen

Mitgliederwand

Gesichter steigen nacheinander auf. Hover oder Tippen zeigt Name, Rolle, Stadt und was die Person in der Community macht, darunter zählt der Rest hoch.

Im Studio öffnen

Beitreten

Ein Band mit der Mitgliederzahl, Gesichter, die beim Scrollen in verschiedenen Tiefen treiben, Vorteile und eine Anmeldung mit einem Feld, die an Ort und Stelle bestätigt.

Im Studio öffnen

Details

Was Community mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/community.tsx
Bringt mit
utilskitbuttoniconinputmotionrevealsectionnumber-ticker
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 18 eigene Texte
Studio
Alle 5 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

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

  • variantoptional
    CommunityVariant

    hubchaptersforummembersjoin

  • eyebrowoptional
    React.ReactNode
  • titlePflicht
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • membersoptional
    number

    Total members

  • peopleoptional
    CommunityMember[]

    Some names for the avatar stack and the wall

  • channelsoptional
    CommunityChannel[]
  • chaptersoptional
    CommunityChapter[]
  • threadsoptional
    CommunityThread[]
  • perksoptional
    string[]

    join: what members get

  • ctaoptional
    { label: string; href: string }
  • actionoptional
    string
  • onJoinoptional
    (email: string) => void

Eingebaute Texte

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

Alle 18 Texte anzeigen
membersEnglisch membersDeutsch Mitglieder
andMoreEnglisch and {n} moreDeutsch und {n} weitere
onlineEnglisch onlineDeutsch online
chaptersEnglisch Local groupsDeutsch Lokale Gruppen
membersOfEnglisch {n} membersDeutsch {n} Mitglieder
allEnglisch AllDeutsch Alle
repliesEnglisch {n} repliesDeutsch {n} Antworten
replyEnglisch 1 replyDeutsch 1 Antwort
solvedEnglisch SolvedDeutsch Gelöst
byEnglisch by {n}Deutsch von {n}
topicEnglisch TopicDeutsch Thema
emailEnglisch EmailDeutsch E-Mail
emailPlaceholderEnglisch you@example.comDeutsch du@beispiel.de
joinEnglisch Join for freeDeutsch Kostenlos beitreten
joinedEnglisch Welcome! Check your inbox to confirm.Deutsch Willkommen! Bestätige kurz in deinem Postfach.
invalidEnglisch Please enter an email address like name@example.com.Deutsch Bitte gib eine E-Mail-Adresse wie name@beispiel.de ein.
showMemberEnglisch About {n}Deutsch Über {n}
pickEnglisch Show {n} on the mapDeutsch {n} auf der Karte zeigen

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Community reagiert selbst auf die Tasten Escape und Leertaste.
  • Setzt aria-controls, aria-describedby, aria-expanded, aria-label und aria-pressed, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen alert, group und status.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • 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. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Community?

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

Welche Varianten hat Community?

5 Varianten, Community-Hub, Lokale Gruppen, Aktuelle Beiträge, Mitgliederwand und Beitreten. Du wählst sie mit der Prop variant, zum Beispiel variant="chapters".

Kann ich die Texte von Community übersetzen?

Ja. Community bringt 18 eigene Texte auf Deutsch und Englisch mit, etwa „Mitglieder“, „online“ und „Lokale Gruppen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Community einbauen?

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

Kann ich Community ohne Code anpassen?

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

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Community stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert