Skip to content
UI Kit
Accent color

Manifesto

What a company stands for, in its own voice. A statement that lights up while you read, beliefs that come into focus, a founder letter that signs itself, this over that, and a pledge to sign.

5 variants
Switch category

Manifesto

Statement

One large statement. While it moves up through the window, its words light up one after another, as you read. Use it once per page.

Open in Studio

Beliefs

What we believe, in large lines. Each one comes into focus while it crosses the middle of the window and steps back afterwards. The heading stays on wide screens.

Open in Studio

Founder letter

A personal letter on a single sheet, with date, greeting and closing. The signature writes itself when it comes into view.

Open in Studio

This over that

Value pairs in the form of the well known manifestos. The chosen side brightens and gets its line as it scrolls in, the other stays crossed out.

Open in Studio

Pledge

Promises that rise in one after another, next to a counter of people who signed. Sign with your name and the count rises by one, you get your number.

Open in Studio

Details

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

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

Props

The ManifestoProps interface from components/ui/manifesto.tsx, with the comments from the code.

  • variantoptional
    ManifestoVariant

    scroll-litbeliefsfounder-letteroverpledge

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • statementoptional
    string

    scroll-lit: the statement

  • highlightoptional
    string

    scroll-lit: a phrase inside the statement in the accent

  • itemsoptional
    { title: string; text?: string }[]

    beliefs and pledge: the lines

  • pairsoptional
    { chosen: string; over: string; text?: string }[]

    over: the pairs

  • letteroptional
    { greeting: string; paragraphs: string[]; closing: string; name: string; role: string; date?: string }

    founder-letter

  • signedoptional
    number

    pledge: people who signed so far

  • ctaoptional
    { label: string; href: string }
  • onSignoptional
    (name: string) => void

Built-in texts

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

Show all 7 texts
overEnglish overGerman statt
signedEnglish people signedGerman Menschen haben unterschrieben
nameEnglish Your nameGerman Dein Name
namePlaceholderEnglish Lena WeberGerman Lena Weber
signEnglish Sign the pledgeGerman Versprechen unterschreiben
thanksEnglish Thank you, {n}. You are number {c}.German Danke, {n}. Du bist Nummer {c}.
requiredEnglish Please enter your name.German Bitte gib deinen Namen ein.

Accessibility

Read from the source of the component.

  • Sets aria-live, so screen readers announce purpose and state.
  • Uses the role 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).
  • With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Manifesto?

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

Which variants does Manifesto have?

5 variants, Statement, Beliefs, Founder letter, This over that and Pledge. You pick one with the variant prop, for example variant="beliefs".

Can I translate the texts of Manifesto?

Yes. Manifesto carries 7 texts of its own in English and German, such as “over”, “people signed” and “Your name”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Manifesto?

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

Can I adjust Manifesto without code?

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

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Manifesto on a page.

Often searched

Jump to

Copied to the clipboard