Marketing blocks
Header sections
Hero header sections for home pages (centered, split, screenshot, mockup, image below) and simple page headers for inner pages. Figma: Hero header section and Header section.
import
{ HeroSection, HeaderSection, type HeroLayout } from "@pepulux/ui"Hero — centered
NewMarketing blocks are here
Build better products, faster
A composable design system with every page section you need — from headers to pricing.
Hero — screenshot
Browser mockup beneath the text.
Your product, front and centre
Show the product in a clean browser frame.
Hero — split with social proof
Design with confidence
Everything your team needs to ship consistent experiences.
ORPBLSDWCW+1
4.9
from 200+ reviewsHero — mockup with app badges
Take it everywhere
Download the app and keep your work in your pocket.
9:41
Hero — brand with logos
Trusted by modern teams
Join thousands of companies building with Pepulux.
Trusted by teams at
LayersOrbitVoltlyBoxwood
Header section — centered and left with image
About us
We're building the future of design systems
Our mission is to make great design accessible to every team.
Company
Meet the people behind Pepulux
A small, curious team that cares about craft.
Careers
Do the best work of your life
We are hiring across design, engineering and support.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| layout (Hero) | "centered" | "split" | "screenshot" | "mockup" | "image-below" | "centered" | Hero layout |
| tone | "light" | "muted" | "brand" | "light" | Background tone — Figma Light / Muted / Brand |
| announcement | { label; message; href? } | — | BadgeGroup above the title |
| title / description / eyebrow | ReactNode / ReactNode / string | — | Heading content |
| primaryAction / secondaryAction | { label; onClick? } | — | Buttons |
| appBadges | boolean | — | Show App Store and Google Play badges instead of buttons |
| image | string | — | Screenshot, mockup or photo source |
| socialProof | { label; rating?; people: string[] } | — | Avatar group with star rating |
| logos | string[] | — | Logo strip under the hero |
| align (HeaderSection) | "left" | "center" | "center" | Header section alignment |