SUSupaUI

Marketing

CalloutBlock

Full-bleed CTA strip. Editorial / solid / frame variants.

Install

bash
npx shadcn@latest add https://supaui.dev/r/callout-block.json

Editorial — paper, ink rules

Field guide

Build your masthead.

A six-week field guide on composing pages with editorial UI. Pre-order Issue 04 today.

Solid — ink-on-paper inversion

Now shipping

SupaUI v2 is live.

Foundations refactor, editorial primitives, charts, marketing family. Add components from the registry today.

Frame — accent rule through middle

Workshop

Compose with three voices.

A two-hour live workshop. Bring a project; leave with a typeset page.

API

  • variant — editorial · solid · frame.
  • CalloutEyebrow, CalloutTitle, CalloutBody, CalloutActions — slot order is up to you.
  • In solid, the eyebrow / title / body automatically flip to paper-on-ink. Pass variant="solid" tone="accent" on actions if you want an accent button to stay legible.
  • In frame, an accent hairline runs through the middle of the frame.