Skip to content
UI Kit
Accent color

Community

The people around a product. Where they meet with live activity, local groups on a map, recent threads by topic, a wall of members and a band to join.

5 variants
Switch category

Community

Community hub

The member count counts up next to the heading, the places to meet sit below as cards with live activity. Cards lift and their icon turns on hover.

Open in Studio

Local groups

Groups as pins on a dotted map, sized by members. Pins grow in one after another, pointing at a city or its row lights both up.

Open in Studio

Recent threads

Threads with topic, author, time and replies, solved ones marked. Topic chips filter the list, rows rise in again, on phones the chips scroll sideways.

Open in Studio

Member wall

Faces rise in one after another. Hover or tap shows name, role, city and what they do in the community, the rest count up below.

Open in Studio

Join band

A band with the member count, faces that drift at different depths while scrolling, perks and a one-field sign-up that confirms in place.

Open in Studio

Details

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

Area
Marketing
Variants
5
Version
1.0.0 · since 1.1.0
File
components/ui/community.tsx
Brings along
utilskitbuttoniconinputmotionrevealsectionnumber-ticker
npm packages
None
Languages
English and German, 18 texts of its own
Studio
All 5 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The CommunityProps interface from components/ui/community.tsx, with the comments from the code.

  • variantoptional
    CommunityVariant

    hubchaptersforummembersjoin

  • eyebrowoptional
    React.ReactNode
  • titlerequired
    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

Built-in texts

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

Show all 18 texts
membersEnglish membersGerman Mitglieder
andMoreEnglish and {n} moreGerman und {n} weitere
onlineEnglish onlineGerman online
chaptersEnglish Local groupsGerman Lokale Gruppen
membersOfEnglish {n} membersGerman {n} Mitglieder
allEnglish AllGerman Alle
repliesEnglish {n} repliesGerman {n} Antworten
replyEnglish 1 replyGerman 1 Antwort
solvedEnglish SolvedGerman Gelöst
byEnglish by {n}German von {n}
topicEnglish TopicGerman Thema
emailEnglish EmailGerman E-Mail
emailPlaceholderEnglish you@example.comGerman du@beispiel.de
joinEnglish Join for freeGerman Kostenlos beitreten
joinedEnglish Welcome! Check your inbox to confirm.German Willkommen! Bestätige kurz in deinem Postfach.
invalidEnglish Please enter an email address like name@example.com.German Bitte gib eine E-Mail-Adresse wie name@beispiel.de ein.
showMemberEnglish About {n}German Über {n}
pickEnglish Show {n} on the mapGerman {n} auf der Karte zeigen

Accessibility

Read from the source of the component.

  • Community handles the keys Escape and Space itself.
  • Sets aria-controls, aria-describedby, aria-expanded, aria-label and aria-pressed, so screen readers announce purpose and state.
  • Uses the roles alert, group and status.
  • Announces changes through a live region without moving focus.
  • 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. 3 places in the code switch motion off then.

Frequent questions

How do I install Community?

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

Which variants does Community have?

5 variants, Community hub, Local groups, Recent threads, Member wall and Join band. You pick one with the variant prop, for example variant="chapters".

Can I translate the texts of Community?

Yes. Community carries 18 texts of its own in English and German, such as “members”, “online” and “Local groups”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Community?

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

Can I adjust Community without code?

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

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Community on a page.

Often searched

Jump to

Copied to the clipboard