SUSupaUI

Marketing

Hero

Editorial / poster / split mastheads. Three voices, one shell.

Install

bash
npx shadcn@latest add https://supaui.dev/r/hero.json

Editorial — masthead with rule

Issue 04 · Spring 2026

The kit speaks loudly. So should the page.

Editorial typography, skeumorphic surfaces, pixel state markers — a UI library that asks for the same care you give a magazine cover.

Vol. 042026 · 04 · 21READ 06 MIN

Poster

Now shipping

SupaUI v2.

Foundations refactor, editorial primitives, charts, and a marketing family that reads like a printed page.

Split — content + aside

Field guide

Compose with three voices.

Gloock display for masthead, Source Serif italic for body, Departure Mono for state. The page reads itself.

Plate 04 — pixel grid · 8px

API

  • variant — editorial · poster · split.
  • HeroEyebrow, HeroTitle, HeroLede, HeroActions, HeroMeta — slot order is up to you.
  • HeroBody, HeroAside — only used inside the split variant; default to a 7/5 column ratio.
  • HeroTitle uses fluid type via clamp() — scales 2.75rem → 5rem with viewport.