Manifesto Page

Add to a project

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

Usage

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

import Link from "next/link"
import { ManifestoPage } from "@/components/templates/manifesto-page"

export default function ManifestoRoute() {
  return (
    <ManifestoPage
      linkComponent={Link}
      design="editorial"
      typeface="serif"
      signatureCount={2481}
      onSign={async (signed) => {
        const response = await fetch("/api/manifesto/sign", { method: signed ? "POST" : "DELETE" })
        if (!response.ok) throw new Error("Could not save your signature")
      }}
    />
  )
}

Props

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

  The whole page's look. classic: huge sans type, outlined numerals, raised art panels, a sticky rail; editorial: a centered serif opening with an italic emphasis, serif headings and numerals, heavy rules between principles, flat art, a centered header and footer; bold: an inverted poster opening, giant solid numerals, thick rules, tiles, an inverted quote and sign panel, a pill header and a wordmark footer; minimal: a transparent header, quiet medium type, small mono numbers, no rail (the pill indexes at every width), outlined art and a simple footer. headerProps and footerProps still win.

• typefacedefault "sans"
  "sans" | "serif"

  The reading text: Inter, or a system serif (New York on Apple devices, Iowan, Palatino or Georgia elsewhere; no font files).

• principlesdefault "MANIFESTO_PRINCIPLES"
  ManifestoPrinciple[]

  { id, title, summary, paragraphs, art?, artAfter?, caption? } per chapter. id is the #anchor; art is one of quote, note, stat, list, cuts, compare, moment, cadence or { kind: "custom", node }, placed after artAfter paragraphs (default 2).

• authorsdefault "MANIFESTO_AUTHORS"
  ManifestoAuthor[]

  { name, role, avatar?, signature? } for the byline and the closing signatures; signature is a list of SVG paths in a 240 x 80 box.

• signersdefault "MANIFESTO_SIGNERS"
  string[]

  Names behind the faces next to the signature count.

• introdefault "MANIFESTO_INTRO"
  string[]

  The paragraphs before the first principle; the first one carries the drop cap.

• closingdefault "MANIFESTO_CLOSING"
  string[]

  The paragraphs above the signatures.

• publisheddefault "2026-10-08"
  string

  ISO date (yyyy-mm-dd) in the byline, formatted with the locale.

• readingTimedefault 9
  number

  Minutes, for the byline, the rail and the sheet.

• signatureCountdefault 2481
  number

  How many people signed before this visitor.

• labelsdefault "DEFAULT_MANIFESTO_PAGE_LABELS"
  Partial<ManifestoPageLabels>

  Every visible string; title plus titleEmphasis make the opening line.

• hrefsdefault "DEFAULT_MANIFESTO_PAGE_HREFS"
  Partial<ManifestoPageHrefs>

  { careers, about }: the P.S. buttons.

• showIndexdefault true
  boolean

  The sticky rail on desktop, the inline list after the intro, and the pill and sheet on smaller screens.

• showProgressdefault true
  boolean

  The thin reading progress bar at the top of the window.

• showIntrodefault true
  boolean

  The opening paragraphs before the first principle.

• showSignaturesdefault true
  boolean

  The closing note with the founders' drawn signatures.

• showSigndefault true
  boolean

  The Sign the manifesto panel with the faces and the count.

• showCareersdefault true
  boolean

  The hiring P.S. with links to careers and the team.

• dropCapdefault true
  boolean

  A large initial on the essay's first paragraph.

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

  The drawn underline, the progress bar and ring, the rail marker, the margin rule, the cut strokes and the highlighted dots.

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

  Sign the manifesto, See open roles and the header's Get started.

• defaultSigneddefault false
  boolean

  Starts with the visitor already signed.

• onSign
  (signed: boolean) => (void | Promise<unknown>)

  Runs when the visitor signs or takes it back; a promise keeps the button loading and a rejection keeps the old state. Without it: 700 ms, then the count updates.

• onCopyLink
  (id: string, url: string) => void

  Runs after a Copy link press with the principle's id and the copied URL.

• headerdefault true
  boolean

  The shared marketing header.

• footerdefault true
  boolean

  The shared marketing footer.

• headerProps
  Partial<MarketingHeaderProps>

  Overrides for the header, spread last.

• footerProps
  Partial<MarketingFooterProps>

  Overrides for the footer, spread last.

• animateIndefault true
  boolean

  The opening rises in and the underline draws once on mount; false keeps it still (thumbnails). Reduced motion always does.

• localedefault "en-US"
  string

  Intl locale for the byline date and the signature count.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for every page link (next/link in an app).

• className
  string

  Classes for the root.

• classNames
  Partial<Record<ManifestoPageSlot, string>>

  Classes for header, progress, hero, title, byline, index, pill, sheet, intro, principle, numeral, heading, body, art, closing, signatures, sign, careers and footer.

Parts