SUSupaUI

Components

Card

Four variants — default, article, figure, data. Skeumorphic shell, editorial typography slots.

Install

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

Default

Notice of release

v0.2 ships foundations, controls, editorial primitives, and charts.

Everything is themable through CSS variables. Override one role, re-skin the kit.

Article

Field notes · 04

The case for editorial UI

Three voices, sharply separated, pull more weight than ten tasteful greys ever could.

Set the masthead. Float the lede. Let the body speak in serif. When every component agrees on the voice, the page reads as a page — not a dashboard.

Figure

Plate 04 — pixel grid · 8px

The 8px grid is the substrate every spacing token snaps to.

Data

MRR

$48,210

+12.4%
Churn

2.1%

−0.3pp
NPS

+62

±0

API

  • variant — default · article · figure · data.
  • CardHeader, CardTitle, CardDescription — base slots.
  • CardEyebrow — pixel-uppercase prefix, drops above CardTitle.
  • CardLede — Source Serif italic intro, pairs with the article variant.
  • CardDelta — pixel arrow + tabular-nums, used in data. Prop: direction="up" | "down" | "flat".