SUSupaUI

Components

Button

Pixel uppercase label, top highlight glaze, soft drop shadow. variant × tone × size compose into a 60-cell matrix without ever touching primitives.

Install

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

Usage

Variants

Five surface treatments — solid, outline, subtle, ghost, link.

Tones

Semantic roles — neutral / accent / danger / success / warning. Variant × tone is a matrix; each cell renders correctly.

Sizes

With icons

Two icon slots — leading and trailing — beat one icon prop with positioning.

Loading

API

  • variant — solid · outline · subtle · ghost · link
  • tone — neutral · accent · danger · success · warning
  • size — sm · md · lg · icon
  • asChild — render as a different element via Radix Slot (e.g. wrap an anchor).
  • loading — replaces the leading icon with a spinner and sets aria-busy.
  • leadingIcon / trailingIcon — drop a Lucide icon (or any node) on either side of the label.