Hero Manifesto
Full-height serif manifesto: lines rise in turn, numbered principles and a hand-drawn signature.
- Type: Hero section
- Styles: Minimal, Dark
- Licence: Charcoal UI Pro
About Hero Manifesto
Hero Manifesto opens with what you believe. Large serif lines rise one after another, the last in your accent colour, followed by numbered principles and a signature that draws itself beside the founder's name.
It is a full-width hero section for React and Tailwind CSS 4, in a minimal and dark style. Preview it at any width above, then install it with one command.
When to use Hero Manifesto
- Studios and agencies with a point of view.
- Mission-driven startups.
- Careers pages.
- Meditation, wellness and slow-software brands.
How it is built
Each line is masked and slides up in turn, the signature is an SVG path drawn with pathLength, and everything stays still for visitors who prefer reduced motion.
It has no component dependencies beyond the shared utilities, so it is one file to read and change.
Goes well with Hero Manifesto
Hero Manifesto is part of 5 full templates, so you can see it in a finished page.
- Northlane template: A studio site that reads like a manifesto.
- Monograph template: A one-person portfolio that books calls.
- Breathe template: Ten quiet minutes a day.
- Patron template: Let your audience fund the work.
- Crew template: A careers page people apply from.
- Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
- Hero Split: A split React hero: copy on the left, a live product window with stats and a chart
- Hero Rotating: A React hero with a rotating headline word, email capture and avatar proof
- Hero Terminal: A developer React hero with light beams on a grid and a typing terminal
Install Hero Manifesto
npx shadcn@latest add @charcoal/hero-manifestoHero Manifesto is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Hero Manifesto work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.