SUSupaUI

Introduction

A shadcn-flavoured kit with a serif backbone.

SupaUI is a registry of components, blocks, and tokens you copy into your app via the shadcn CLI. It's shadcn/ui under the surface — Radix primitives, accessibility, no runtime — with editorial type and pixel labels on top.

What you get

  • 17+ ready components, themed end-to-end through CSS variables.
  • One-token rethemes — change --supa-color-accent, watch the kit follow.
  • Three font voices wired up: Gloock (display), Source Serif (long-form), Inter (UI), Departure Mono (pixel labels).
  • Skeumorphic depth recipe — top highlight glaze + soft drop shadow, no faked dark hairlines.
  • Standard shadcn registry, so npx shadcn add just works.

Where to next

Installation

Wire SupaUI into a Next.js + Tailwind v4 project in one command.

Theming

How tokens flow from primitives → semantic roles → components.

Button

The reference for every variant × tone × size matrix in the kit.

Registry

The JSON shape your CLI fetches when you add a component.