SUSupaUI

Marketing

FeatureRow

Editorial feature description. Index / title / serif body / meta. Optional media slot.

Install

bash
npx shadcn@latest add https://supaui.dev/r/feature-row.json

Default (no media)

01

Editorial typography

Three voices, sharply separated — Gloock display, Source Serif body, Departure Mono pixel state. Mix them and the page reads cleanly.
READ 04 MIN
02

Skeumorphic surfaces

Top-highlight + drop shadow on every raised element. Never differential bottom borders. The shell is the contract.
READ 06 MIN
03

Pixel state markers

Status, identity, control glyphs are pixel-grid SVGs. State reads as state, not as a verb.
READ 03 MIN

With media — alternating

04

Custom SVG charts

Bar, Line, Sparkline. No recharts, no visx. Pixel mode quantises bar heights to 8px steps.
DATA · BAR · LINE · SPARK
05

Density tiers

Compact / cozy / roomy. Set data-density on any parent; rows read --supa-row from the cascade.
DENSITY · 28 · 36 · 48

API

  • variant — default · media.
  • reverse — flips the media slot to the right.
  • index, title, body, meta, media — props rather than slots so consumers can stay declarative.
  • FeatureRowGroup — wraps multiple rows with hairline separators.