Design-Next

Navigation

Search pages and components

Design System

Build once. Brand anywhere.

The unified design system for UN *-Next applications — 91 shadcn-compatible components, 23 full-page blocks, OKLch tokens, and a brand injector that recolors everything at runtime.

Browse componentsInstall

Live components

button

switch

tabs

General settings panel.

badge

DefaultSecondaryOutlineDestructiveFeatured

calendar

August 2026

91

components

23

blocks

114

live demos

1 color → ∞

themes

Token gallery

Typography

The quick brown fox jumps over the lazy doglarge-title
The quick brown fox jumps over the lazy dogtitle-1
The quick brown fox jumps over the lazy dogtitle-2
The quick brown fox jumps over the lazy dogbody
The quick brown fox jumps over the lazy dogcallout
The quick brown fox jumps over the lazy dogfootnote

Color

background

canvas

foreground

card

primary

primary-soft

secondary

muted

destructive

success

warning

border

material-regular

Depth

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-glow-primary

Shape

rounded-md (10px)

rounded-lg (12px)

rounded-xl (14px)

rounded-2xl (22px)

Motion

Hover each tile to feel the easing.

ease-hig / duration-fast

ease-spring / duration-base

ease-spring / duration-slow

Quick start

Add the registry to your components.json:

"registries": {
  "@design": "https://design.eregistrations.dev/r/{name}.json"
}

Then install the token set:

npx shadcn@latest add @design/tokens

After tokens are installed, add any component the same way — @design/button, @design/calendar, etc. Override --primary at runtime to rebrand instantly.