# Community Page > A community hub: a drawn live chat hero, member stats, forum highlights, a dot map of local chapters, ambassadors and member builds. - Type: React template (Templates) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add community-page` - Docs: https://wingo-ui.com/templates/community-page ## Interaction The hero rises in once beside a drawn #show-and-tell chat: messages with a timeline attachment and reactions, a typing indicator, member avatars with presence dots floating on two orbits, and (on wider screens) a meetup card, a Solved thread and a welcome chip drifting around it. The online count and the ๐ŸŽ‰ reactions tick up every few seconds while the hero is on screen, and the Members stat ticks with them. The stats count up the first time they scroll in. In the forum, Trending, New and Unanswered tabs (arrow keys move between them) switch the thread list; every thread is one link with its category dot, author, relative time, Solved, Planned or No replies yet badge, participants and reply and like counts. The chapters map is a dot grid of the continents with a pin per chapter: click a pin (or hover or focus a chapter card) to show the chapter's leaders, members and next meetup in the callout. The region chips (a scrollable row on phones) filter the chapter cards and dim the other pins; Show more reveals the rest of the cards. Join on a chapter toggles to Joined (aria-pressed) and counts you in. The ambassador form checks name, email (on blur too), city and a 30-character minimum for the idea, shows each error under its field and focuses the first; while onApply runs the button spins, a rejection shows an error, then a success panel thanks the applicant by first name with the next steps. Member builds are cards with drawn previews, each one link, next to a champions leaderboard with medals and rank changes. The closing band takes a newsletter signup. Reduced motion keeps everything still. ## Installation ```bash npx wingo-ui@latest add community-page ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/community-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/community-page.tsx` - `components/templates/community-page-data.ts` npm dependencies: `npm i lucide-react motion` Wingo UI dependencies (installed automatically): - [Marketing Section](https://wingo-ui.com/components/marketing-section) ([Markdown](https://wingo-ui.com/components/marketing-section.md)) - [Marketing Header](https://wingo-ui.com/components/marketing-header) ([Markdown](https://wingo-ui.com/components/marketing-header.md)) - [Marketing Footer](https://wingo-ui.com/components/marketing-footer) ([Markdown](https://wingo-ui.com/components/marketing-footer.md)) - [Stats Section](https://wingo-ui.com/components/stats-section) ([Markdown](https://wingo-ui.com/components/stats-section.md)) - [CTA Section](https://wingo-ui.com/components/cta-section) ([Markdown](https://wingo-ui.com/components/cta-section.md)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Field](https://wingo-ui.com/components/field) ([Markdown](https://wingo-ui.com/components/field.md)) - [Input](https://wingo-ui.com/components/input) ([Markdown](https://wingo-ui.com/components/input.md)) - [Leaderboard](https://wingo-ui.com/components/leaderboard) ([Markdown](https://wingo-ui.com/components/leaderboard.md)) - [Tabs](https://wingo-ui.com/components/tabs) ([Markdown](https://wingo-ui.com/components/tabs.md)) - [Textarea](https://wingo-ui.com/components/textarea) ([Markdown](https://wingo-ui.com/components/textarea.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Navigation](https://wingo-ui.com/components/navigation) ([Markdown](https://wingo-ui.com/components/navigation.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx // app/(marketing)/community/page.tsx "use client" import Link from "next/link" import { CommunityPage } from "@/components/templates/community-page" export default function CommunityRoute() { return ( { const response = await fetch("/api/community/ambassadors", { method: "POST", body: JSON.stringify(values) }) if (!response.ok) throw new Error("Could not send the application") }} onJoinChapter={(chapter, joined) => { void fetch(`/api/community/chapters/${chapter.id}`, { method: joined ? "POST" : "DELETE" }) }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "bold" \| "minimal"` | `"classic"` | The whole page's look. classic: a split hero over a dotted glow, a divided stats row, gray bands and a split newsletter band; bold: a pill header, a giant stage title on a gradient mesh, an inverted stats band, rounder cards, a drawn newsletter band and a wordmark footer; minimal: a transparent header, a centered stacked hero without floating cards, outlined flat cards, no gray bands, a plain closing band and a simple footer. statsProps and ctaProps still win. | | `stats?` | `StatsSectionItem[]` | `"COMMUNITY_STATS"` | The stats row under the hero: { value, label, description?, prefix?, suffix?, decimals? }. With live, the first one ticks. | | `forumCategories?` | `CommunityForumCategory[]` | `"COMMUNITY_FORUM_CATEGORIES"` | { value, label, color, threads, href }: the dot color and label on each thread and the side list. | | `threads?` | `CommunityThread[]` | `"COMMUNITY_THREADS"` | { id, title, excerpt, category, author, postedAt, replies, likes, participants, status?, href }. Trending ranks threads with replies by likes and replies, New sorts by date, Unanswered keeps the ones with no replies. | | `regions?` | `CommunityRegion[]` | `"COMMUNITY_REGIONS"` | The chapter filter chips, { value, label }; only regions with chapters show. | | `chapters?` | `CommunityChapter[]` | `"COMMUNITY_CHAPTERS"` | { id, city, country, region, lat, lon, members, leaders, timeZone, nextMeetup?, isNew?, href }. lat and lon place the pin; the meetup shows in the chapter's time zone. | | `ambassadors?` | `CommunityAmbassador[]` | `"COMMUNITY_AMBASSADORS"` | Featured ambassadors: { id, name, city, specialty, meetups, since }. | | `perks?` | `CommunityPerk[]` | `"COMMUNITY_PERKS"` | What ambassadors get: { id, icon?, title, description }. | | `showcase?` | `CommunityShowcaseItem[]` | `"COMMUNITY_SHOWCASE"` | Member builds: { id, kind, title, description, author, uses, likes, preview, previewItems?, href }. preview picks the drawn mini scene: board, okr, calendar, flow or sync. | | `champions?` | `LeaderboardItem[]` | `"COMMUNITY_CHAMPIONS"` | Champions of the month for the Leaderboard: { id, name, value (points), description?, previousRank? }. | | `principles?` | `CommunityPrinciple[]` | `"COMMUNITY_PRINCIPLES"` | The code of conduct summary: { id, icon?, title, description }. | | `labels?` | `Partial` | `"DEFAULT_COMMUNITY_PAGE_LABELS"` | Every visible string; the ones with numbers or names in them are functions. | | `hrefs?` | `Partial` | `"DEFAULT_COMMUNITY_PAGE_HREFS"` | { forum, discord, ask, chapters, events, templates, conduct, report, privacy, announcement, pill }. | | `now?` | `string` | `"2026-10-12T15:00:00Z"` | The ISO moment thread times count from ("5 hr. ago"), fixed so the server and the browser agree; an invalid value shows plain dates. | | `online?` | `number` | `1284` | Members online in the hero before the live ticks. | | `live?` | `boolean` | `true` | The online count, the ๐ŸŽ‰ reactions and the first stat tick up every few seconds while the hero is on screen. | | `defaultTab?` | `"trending" \| "new" \| "unanswered"` | `"trending"` | The forum tab on load. | | `threadLimit?` | `number` | `5` | Threads per forum tab. | | `defaultRegion?` | `string` | `"all"` | The chapter filter on load: all or a region value. | | `chapterLimit?` | `number` | `6` | Chapter cards before the Show more button; 0 shows every chapter. | | `defaultJoined?` | `string[]` | | Chapter ids the visitor already joined. | | `minIdea?` | `number` | `30` | The shortest What would you organize? answer, in characters. 0 drops the rule. | | `ctaVariant?` | `"split" \| "inverted" \| "soft"` | `"split"` | The newsletter band: copy beside the form on a raised panel, a solid band or a gray band. Applies to the classic design. | | `showAnnouncement?` | `boolean` | `true` | The Summit strip above the header bar. | | `showStats?` | `boolean` | `true` | The stats row under the hero. | | `showForum?` | `boolean` | `true` | Forum highlights. | | `showChapters?` | `boolean` | `true` | The chapters map and list. | | `showAmbassadors?` | `boolean` | `true` | The ambassadors program and its form. | | `showShowcase?` | `boolean` | `true` | Member builds and the champions leaderboard. | | `showConduct?` | `boolean` | `true` | The code of conduct summary. | | `showCta?` | `boolean` | `true` | The newsletter band. | | `alternate?` | `boolean` | `true` | Gray bands on every other section. Applies to the classic and bold designs. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Accents: the hero glow and pill tag, the active reaction, map pins, perk icons, the Ambassador badge and leaderboard bars. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Join the forum, Ask the community, Send application, the header's Get started and the newsletter button; brand is the marketing orange. | | `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | The corners of the form fields. | | `header?` | `boolean` | `true` | The marketing header; off inside a site layout. | | `footer?` | `boolean` | `true` | The marketing footer. | | `headerProps?` | `Partial` | | Passed to MarketingHeader. | | `footerProps?` | `Partial` | | Passed to MarketingFooter. | | `statsProps?` | `Partial` | | Overrides for the StatsSection. | | `ctaProps?` | `Partial` | | Overrides for the CtaSection. | | `onApply?` | `(values: CommunityApplication) => (void \| Promise)` | | The ambassador application: { name, email, city, idea }. A promise keeps the button loading and a rejection shows an error. Without it the form waits 900 ms and shows the success panel. | | `onJoinChapter?` | `(chapter: CommunityChapter, joined: boolean) => void` | | A chapter was joined or left. | | `onSubscribe?` | `(email: string) => (void \| Promise)` | | The newsletter band; a rejected promise shows an error. Without it: 900 ms, then success. | | `animateIn?` | `boolean` | `true` | The hero rises in, the scene floats, the counts tick and the stats count up; false keeps the page still (thumbnails). Reduced motion always does. | | `locale?` | `string` | `"en-US"` | Intl locale for counts, relative thread times and meetup dates. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every link on the page (next/link in an app). | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, hero, title, scene, stats, forum, thread, chapters, map, chapter, ambassadors, ambassador, form, success, showcase, build, champions, conduct, cta and footer. | ## Parts ### COMMUNITY_PAGE_SAMPLE (constant) All the sample content in one object: now, stats, forum categories, threads, regions, chapters, ambassadors, perks, showcase, champions and principles. ### COMMUNITY_NOW (constant) The fixed moment the sample thread times count from: 2026-10-12T15:00:00Z. ### COMMUNITY_STATS (constant) 48,213 members, 3,420 posts this week, 112 countries and 64 chapters. ### COMMUNITY_FORUM_CATEGORIES (constant) Show and tell, Templates, Automations, Integrations and API, Help and how-to, Feedback and ideas. ### COMMUNITY_THREADS (constant) Ten forum threads, three of them still unanswered. ### COMMUNITY_REGIONS (constant) Americas, Europe, Africa and Asia Pacific. ### COMMUNITY_CHAPTERS (constant) Twelve chapters from New York to Sydney, each with leaders and the next meetup. ### COMMUNITY_AMBASSADORS (constant) Four featured ambassadors. ### COMMUNITY_PERKS (constant) Six ambassador perks: plan, meetup budget, Summit, early access, the team, swag. ### COMMUNITY_SHOWCASE (constant) Six member builds: templates, automations and an integration. ### COMMUNITY_CHAMPIONS (constant) The five champions of the month with points and last month's rank. ### COMMUNITY_PRINCIPLES (constant) The four code of conduct principles. ### DEFAULT_COMMUNITY_PAGE_LABELS (constant) The English strings. ### DEFAULT_COMMUNITY_PAGE_HREFS (constant) The default link targets. ### COMMUNITY_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "bold", "minimal"]. ### CommunityPageProps (type) Props of CommunityPage. ### CommunityPageDesign (type) "classic" | "bold" | "minimal". ### CommunityThread (type) One forum thread. ### CommunityForumCategory (type) One forum category with its dot color. ### CommunityForumTab (type) "trending" | "new" | "unanswered". ### CommunityChapter (type) One local chapter with its map position and next meetup. ### CommunityMeetup (type) A chapter's next meetup: { title, startsAt, venue, going }. ### CommunityRegion (type) A chapter region: { value, label }. ### CommunityAmbassador (type) One featured ambassador. ### CommunityPerk (type) One ambassador perk. ### CommunityShowcaseItem (type) One member build. ### CommunityPrinciple (type) One code of conduct principle. ### CommunityApplication (type) The ambassador form's values passed to onApply. ### CommunityPageLabels (type) The strings labels can override. ### CommunityPageHrefs (type) The link targets hrefs can override. ## Examples - **Bold design**: design="bold": a giant stage title on a gradient mesh, an inverted stats band, rounder cards and a wordmark footer. - **Minimal design**: design="minimal": a transparent header, a centered quiet hero, outlined flat cards, no gray bands and a simple footer. - **Brand orange, Europe first**: tone and ctaTone brand, the chapters filtered to Europe and London already joined. - **Unanswered threads, inverted band**: The forum opens on Unanswered so members see where help is needed; the newsletter sits on a solid band. - **Application queue down**: An onApply that rejects: fill the ambassador form and send it to see the error while every value stays. ## See also - [Events Page](https://wingo-ui.com/templates/events-page) ([Markdown](https://wingo-ui.com/templates/events-page.md)) - [Blog Page](https://wingo-ui.com/templates/blog-page) ([Markdown](https://wingo-ui.com/templates/blog-page.md)) - [Customers Page](https://wingo-ui.com/templates/customers-page) ([Markdown](https://wingo-ui.com/templates/customers-page.md)) - [Leaderboard](https://wingo-ui.com/components/leaderboard) ([Markdown](https://wingo-ui.com/components/leaderboard.md)) - [Stats Section](https://wingo-ui.com/components/stats-section) ([Markdown](https://wingo-ui.com/components/stats-section.md)) --- Canonical: https://wingo-ui.com/templates/community-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt