# Manifesto Page > A company manifesto as a typeset long read: a full-screen opening, eight numbered principles with drawn art, signatures and a hiring P.S. - 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 manifesto-page` - Docs: https://wingo-ui.com/templates/manifesto-page ## Interaction The opening fills the first screen: the title rises in once and a hand-drawn underline draws under its last words, then Begin reading glides to the essay. A thin bar at the top of the window tracks the whole page. On desktop a sticky rail lists the principles, marks the one in the middle of the screen and fills a progress line; on tablets and phones a floating Principle 3 of 8 pill with a progress ring appears inside the principles and opens a bottom sheet with the list (Escape or a swipe closes it, a pick scrolls there after it closes). Every index link scrolls smoothly, updates the URL hash and moves focus to the principle's heading. Each principle has a Copy link button that copies the page URL with its #anchor, shows Copied for two seconds and announces it. Each chapter carries its own drawn element: a before and after of a noisy and a calm Monday, a margin note, a struck-through cut list, a search palette under its 100 ms budget, a 93% dot grid, a practice list, a display-size pull quote and a weekly loop. Sign the manifesto spins briefly, adds you to the faces and the count, and toggles back (aria-pressed). The founders' signatures, a hiring P.S. with links to careers and the team, and the footer close the page. Reduced motion keeps everything still and jumps instead of gliding. ## Installation ```bash npx wingo-ui@latest add manifesto-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/manifesto-page` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/templates/manifesto-page.tsx` - `components/templates/manifesto-page-data.ts` npm dependencies: `npm i lucide-react motion` Wingo UI dependencies (installed automatically): - [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)) - [Avatar](https://wingo-ui.com/components/avatar) ([Markdown](https://wingo-ui.com/components/avatar.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Drawer](https://wingo-ui.com/components/drawer) ([Markdown](https://wingo-ui.com/components/drawer.md)) - [Kbd](https://wingo-ui.com/components/kbd) ([Markdown](https://wingo-ui.com/components/kbd.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)/manifesto/page.tsx "use client" import Link from "next/link" import { ManifestoPage } from "@/components/templates/manifesto-page" export default function ManifestoRoute() { return ( { const response = await fetch("/api/manifesto/sign", { method: signed ? "POST" : "DELETE" }) if (!response.ok) throw new Error("Could not save your signature") }} /> ) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `design?` | `"classic" \| "editorial" \| "bold" \| "minimal"` | `"classic"` | 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. | | `typeface?` | `"sans" \| "serif"` | `"sans"` | The reading text: Inter, or a system serif (New York on Apple devices, Iowan, Palatino or Georgia elsewhere; no font files). | | `principles?` | `ManifestoPrinciple[]` | `"MANIFESTO_PRINCIPLES"` | { 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). | | `authors?` | `ManifestoAuthor[]` | `"MANIFESTO_AUTHORS"` | { name, role, avatar?, signature? } for the byline and the closing signatures; signature is a list of SVG paths in a 240 x 80 box. | | `signers?` | `string[]` | `"MANIFESTO_SIGNERS"` | Names behind the faces next to the signature count. | | `intro?` | `string[]` | `"MANIFESTO_INTRO"` | The paragraphs before the first principle; the first one carries the drop cap. | | `closing?` | `string[]` | `"MANIFESTO_CLOSING"` | The paragraphs above the signatures. | | `published?` | `string` | `"2026-10-08"` | ISO date (yyyy-mm-dd) in the byline, formatted with the locale. | | `readingTime?` | `number` | `9` | Minutes, for the byline, the rail and the sheet. | | `signatureCount?` | `number` | `2481` | How many people signed before this visitor. | | `labels?` | `Partial` | `"DEFAULT_MANIFESTO_PAGE_LABELS"` | Every visible string; title plus titleEmphasis make the opening line. | | `hrefs?` | `Partial` | `"DEFAULT_MANIFESTO_PAGE_HREFS"` | { careers, about }: the P.S. buttons. | | `showIndex?` | `boolean` | `true` | The sticky rail on desktop, the inline list after the intro, and the pill and sheet on smaller screens. | | `showProgress?` | `boolean` | `true` | The thin reading progress bar at the top of the window. | | `showIntro?` | `boolean` | `true` | The opening paragraphs before the first principle. | | `showSignatures?` | `boolean` | `true` | The closing note with the founders' drawn signatures. | | `showSign?` | `boolean` | `true` | The Sign the manifesto panel with the faces and the count. | | `showCareers?` | `boolean` | `true` | The hiring P.S. with links to careers and the team. | | `dropCap?` | `boolean` | `true` | A large initial on the essay's first paragraph. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | The drawn underline, the progress bar and ring, the rail marker, the margin rule, the cut strokes and the highlighted dots. | | `ctaTone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Sign the manifesto, See open roles and the header's Get started. | | `defaultSigned?` | `boolean` | `false` | Starts with the visitor already signed. | | `onSign?` | `(signed: boolean) => (void \| Promise)` | | 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. | | `header?` | `boolean` | `true` | The shared marketing header. | | `footer?` | `boolean` | `true` | The shared marketing footer. | | `headerProps?` | `Partial` | | Overrides for the header, spread last. | | `footerProps?` | `Partial` | | Overrides for the footer, spread last. | | `animateIn?` | `boolean` | `true` | The opening rises in and the underline draws once on mount; false keeps it still (thumbnails). Reduced motion always does. | | `locale?` | `string` | `"en-US"` | Intl locale for the byline date and the signature count. | | `linkComponent?` | `(props: LinkComponentProps) => ReactNode` | `""` | The router link for every page link (next/link in an app). | | `className?` | `string` | | Classes for the root. | | `classNames?` | `Partial>` | | Classes for header, progress, hero, title, byline, index, pill, sheet, intro, principle, numeral, heading, body, art, closing, signatures, sign, careers and footer. | ## Parts ### MANIFESTO_PAGE_SAMPLE (constant) All the sample content in one object: principles, authors, signers, intro and closing. ### MANIFESTO_PRINCIPLES (constant) Eight principles, from Calm is a feature to Ship, then listen, each with its own drawn element. ### MANIFESTO_AUTHORS (constant) Emma Carter and Liam Brooks, the co-founders, with drawn signatures. ### MANIFESTO_SIGNERS (constant) Six names for the faces next to the signature count. ### MANIFESTO_INTRO (constant) The two opening paragraphs. ### MANIFESTO_CLOSING (constant) The two closing paragraphs above the signatures. ### DEFAULT_MANIFESTO_PAGE_LABELS (constant) The English strings. ### DEFAULT_MANIFESTO_PAGE_HREFS (constant) The default link targets: /careers and /about. ### MANIFESTO_PAGE_DESIGNS (constant) The design names, classic first: ["classic", "editorial", "bold", "minimal"]. ### ManifestoPageProps (type) Props of ManifestoPage. ### ManifestoPageDesign (type) "classic" | "editorial" | "bold" | "minimal". ### ManifestoPageTypeface (type) "sans" | "serif". ### ManifestoPageSlot (type) The keys of classNames. ### ManifestoPrinciple (type) One chapter: id, title, summary, paragraphs and its art. ### ManifestoArt (type) The drawn element of a chapter, a union on kind. ### ManifestoAuthor (type) A byline author with an optional drawn signature. ### ManifestoNotification (type) One notification row of the compare art. ### ManifestoPageLabels (type) The strings labels can override. ### ManifestoPageHrefs (type) The link targets hrefs can override. ## Examples - **Editorial design**: design="editorial" with a serif reading face: a centered serif opening, italic numerals, heavy rules and flat art. - **Bold design**: design="bold": an inverted poster opening, giant solid numerals, tiles and an inverted pull quote and sign panel. - **Minimal design**: design="minimal": quiet type, small mono numbers, no rail; the Principle 3 of 8 pill indexes the essay at every width. - **Brand orange**: tone and ctaTone brand: an orange underline, progress, rail marker and cut strokes, with orange Sign and careers buttons. - **Inside a site layout**: Without header and footer, already signed, no drop cap and no hiring P.S., for a page that sits in an existing layout. ## See also - [About Page](https://wingo-ui.com/templates/about-page) ([Markdown](https://wingo-ui.com/templates/about-page.md)) - [Blog Post Page](https://wingo-ui.com/templates/blog-post-page) ([Markdown](https://wingo-ui.com/templates/blog-post-page.md)) - [Careers Page](https://wingo-ui.com/templates/careers-page) ([Markdown](https://wingo-ui.com/templates/careers-page.md)) - [Table Of Contents](https://wingo-ui.com/components/table-of-contents) ([Markdown](https://wingo-ui.com/components/table-of-contents.md)) --- Canonical: https://wingo-ui.com/templates/manifesto-page More components: https://wingo-ui.com/components ยท Index for agents: https://wingo-ui.com/llms.txt