Community Page

Add to a project

Pro item: the CLI needs a Pro account. See plans

Usage

// app/(marketing)/community/page.tsx
"use client"

import Link from "next/link"
import { CommunityPage } from "@/components/templates/community-page"

export default function CommunityRoute() {
  return (
    <CommunityPage
      linkComponent={Link}
      ctaTone="brand"
      onApply={async (values) => {
        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

• designdefault "classic"
  "classic" | "bold" | "minimal"

  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.

• statsdefault "COMMUNITY_STATS"
  StatsSectionItem[]

  The stats row under the hero: { value, label, description?, prefix?, suffix?, decimals? }. With live, the first one ticks.

• forumCategoriesdefault "COMMUNITY_FORUM_CATEGORIES"
  CommunityForumCategory[]

  { value, label, color, threads, href }: the dot color and label on each thread and the side list.

• threadsdefault "COMMUNITY_THREADS"
  CommunityThread[]

  { 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.

• regionsdefault "COMMUNITY_REGIONS"
  CommunityRegion[]

  The chapter filter chips, { value, label }; only regions with chapters show.

• chaptersdefault "COMMUNITY_CHAPTERS"
  CommunityChapter[]

  { 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.

• ambassadorsdefault "COMMUNITY_AMBASSADORS"
  CommunityAmbassador[]

  Featured ambassadors: { id, name, city, specialty, meetups, since }.

• perksdefault "COMMUNITY_PERKS"
  CommunityPerk[]

  What ambassadors get: { id, icon?, title, description }.

• showcasedefault "COMMUNITY_SHOWCASE"
  CommunityShowcaseItem[]

  Member builds: { id, kind, title, description, author, uses, likes, preview, previewItems?, href }. preview picks the drawn mini scene: board, okr, calendar, flow or sync.

• championsdefault "COMMUNITY_CHAMPIONS"
  LeaderboardItem[]

  Champions of the month for the Leaderboard: { id, name, value (points), description?, previousRank? }.

• principlesdefault "COMMUNITY_PRINCIPLES"
  CommunityPrinciple[]

  The code of conduct summary: { id, icon?, title, description }.

• labelsdefault "DEFAULT_COMMUNITY_PAGE_LABELS"
  Partial<CommunityPageLabels>

  Every visible string; the ones with numbers or names in them are functions.

• hrefsdefault "DEFAULT_COMMUNITY_PAGE_HREFS"
  Partial<CommunityPageHrefs>

  { forum, discord, ask, chapters, events, templates, conduct, report, privacy, announcement, pill }.

• nowdefault "2026-10-12T15:00:00Z"
  string

  The ISO moment thread times count from ("5 hr. ago"), fixed so the server and the browser agree; an invalid value shows plain dates.

• onlinedefault 1284
  number

  Members online in the hero before the live ticks.

• livedefault true
  boolean

  The online count, the 🎉 reactions and the first stat tick up every few seconds while the hero is on screen.

• defaultTabdefault "trending"
  "trending" | "new" | "unanswered"

  The forum tab on load.

• threadLimitdefault 5
  number

  Threads per forum tab.

• defaultRegiondefault "all"
  string

  The chapter filter on load: all or a region value.

• chapterLimitdefault 6
  number

  Chapter cards before the Show more button; 0 shows every chapter.

• defaultJoined
  string[]

  Chapter ids the visitor already joined.

• minIdeadefault 30
  number

  The shortest What would you organize? answer, in characters. 0 drops the rule.

• ctaVariantdefault "split"
  "split" | "inverted" | "soft"

  The newsletter band: copy beside the form on a raised panel, a solid band or a gray band. Applies to the classic design.

• showAnnouncementdefault true
  boolean

  The Summit strip above the header bar.

• showStatsdefault true
  boolean

  The stats row under the hero.

• showForumdefault true
  boolean

  Forum highlights.

• showChaptersdefault true
  boolean

  The chapters map and list.

• showAmbassadorsdefault true
  boolean

  The ambassadors program and its form.

• showShowcasedefault true
  boolean

  Member builds and the champions leaderboard.

• showConductdefault true
  boolean

  The code of conduct summary.

• showCtadefault true
  boolean

  The newsletter band.

• alternatedefault true
  boolean

  Gray bands on every other section. Applies to the classic and bold designs.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Accents: the hero glow and pill tag, the active reaction, map pins, perk icons, the Ambassador badge and leaderboard bars.

• ctaTonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Join the forum, Ask the community, Send application, the header's Get started and the newsletter button; brand is the marketing orange.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  The corners of the form fields.

• headerdefault true
  boolean

  The marketing header; off inside a site layout.

• footerdefault true
  boolean

  The marketing footer.

• headerProps
  Partial<MarketingHeaderProps>

  Passed to MarketingHeader.

• footerProps
  Partial<MarketingFooterProps>

  Passed to MarketingFooter.

• statsProps
  Partial<StatsSectionProps>

  Overrides for the StatsSection.

• ctaProps
  Partial<CtaSectionProps>

  Overrides for the CtaSection.

• onApply
  (values: CommunityApplication) => (void | Promise<unknown>)

  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<unknown>)

  The newsletter band; a rejected promise shows an error. Without it: 900 ms, then success.

• animateIndefault true
  boolean

  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.

• localedefault "en-US"
  string

  Intl locale for counts, relative thread times and meetup dates.

• linkComponentdefault "<a>"
  (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<Record<CommunityPageSlot, string>>

  Classes for header, hero, title, scene, stats, forum, thread, chapters, map, chapter, ambassadors, ambassador, form, success, showcase, build, champions, conduct, cta and footer.

Parts