Primitives

Buttons, inputs, badges, avatars — the atomic building blocks.

Button

Six variants, four sizes, loading and disabled states, and a polymorphic render prop.

  • Button

shimmer sweeps a sheen on hover. It composes with any variant, is pure CSS (no motion runtime, nothing added to the bundle), and does not sweep under prefers-reduced-motion. For a marketing CTA — not a row action.

burst throws a puff of themed particles from the point you pressed. The simulation is lazy — its chunk is fetched on the first press and never before, so a plain button pays nothing — and it is deliberately 2D canvas, not WebGL: a browser allows only a handful of live WebGL contexts, so a button that opened one per press would break a real toolbar and evict the hero effect running elsewhere on the page. Reduced motion gets the click without the puff. Save it for a moment worth celebrating; on a row action pressed forty times a day it is noise.

As a link

Badge

Short status / label pills in every variant.

  • Badge
defaultsecondaryoutlineghostdestructivemuted

Input & Label

Text inputs with default and ghost variants, three sizes, and a disabled state.

  • Input
  • Label

Select

A Base UI select with grouped, labelled, separated options.

  • Select
  • SelectTrigger
  • SelectValue
  • SelectContent
  • SelectItem
  • SelectGroup
  • SelectGroupLabel
  • SelectSeparator

Avatar

Three sizes with an initials fallback when the image is missing.

  • Avatar
  • AvatarImage
  • AvatarFallback
SMMDLG

Separator

Horizontal or vertical dividers with the correct ARIA role.

  • Separator
DocsAPIBlog

Spinner

The house loading indicator, sized to the current font by default.

  • Spinner

Kbd

Keys and chords for hotkey hints.

  • Kbd
  • KbdGroup
KPEsc

Tooltip

Hover / focus tooltips, positioned, sharing an open delay via the provider.

  • Tooltip
  • TooltipProvider
  • TooltipTrigger
  • TooltipContent