The design system, rendered live

Every color, shadow, radius, and component in @workspace/ui, read from the real source rather than hand-copied — click any swatch or component to copy its token or usage snippet.

Use this registry

Add the registry namespace to your project, then use the shadcn CLI to browse and install components. The registry index is available at /r/registry.json.

1. Configure components.json

Add the registry URL template to the top-level `registries` object.

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

2. Browse and install

Choose your package manager. The same commands work with each CLI.

Configure this registry

pnpm dlx shadcn@latest registry add @kunalkeshan=https://kunalkeshan.dev/r/{name}.json

List components

pnpm dlx shadcn@latest list @kunalkeshan

Search components

pnpm dlx shadcn@latest search @kunalkeshan --query button

View a component

pnpm dlx shadcn@latest view @kunalkeshan/button

Install a component

pnpm dlx shadcn@latest add @kunalkeshan/button

Install by direct URL

pnpm dlx shadcn@latest add https://kunalkeshan.dev/r/button.json

Tokens

Colors

Every color token, light and dark. Status colors always pair with a near-black foreground, never light text on orange/yellow.

Background

--background

#faf9f6#0b0b0b

Foreground

--foreground

#0b0b0b#f1f0ee

Card / Popover

--card

#ffffff#181818

Primary

--primary

#ffa500#ffa500

Primary foreground

--primary-foreground

#0b0b0b#0b0b0b

Secondary

--secondary

#1c92ff#1c92ff

Secondary foreground

--secondary-foreground

#ffffff#0b0b0b

Muted / Accent

--muted

#f1f0ee#242424

Muted foreground

--muted-foreground

#6b6b6b#9a9a9a

Success

--success

#00e07b#00e07b

Warning

--warning

#ffb800#ffb800

Destructive

--destructive

#ff4d4d#ff6b6b

Border / Input

--border

#0b0b0b#f1f0ee

Ring

--ring

#1c92ff#ffa500

Overlay

--overlay

rgba(11, 11, 11, 0.55)rgba(0, 0, 0, 0.7)

Body foreground

--body-foreground

#393939#c7c7c7

Typography

Nunito Sans (body) and Montserrat (headings), via @workspace/ui/lib/fonts.

Display

Modern problems, modern services.

font-heading (Montserrat) · text-4xl/5xl · font-black

Headings

The fine print, plainly stated.

font-heading · text-4xl/5xl · font-black

Modern problems, require modern services.

font-heading · text-2xl/3xl · font-black

Card heading

font-heading · text-lg/xl · font-black

Body

Privacy policy, terms, and any other legal documents for this site.

font-sans (Nunito Sans) · text-base/lg · text-body-foreground

A working software engineer who also freelances independently.

font-sans · text-sm · text-body-foreground

No legal documents published yet.

font-sans · text-sm · text-muted-foreground

Mono

const cardLift = 'translate-y-0 ...'

font-mono (Ubuntu Mono) · text-sm

Shadows

Solid, single-color, offset shadows — no blur, no spread. Color always equals --border, so shadows invert automatically in dark mode.

shadow-sm

--shadow-sm

shadow

--shadow-base

shadow-lg

--shadow-lg

shadow-xl

--shadow-xl

shadow-2xl

--shadow-2xl

shadow-reverse

--shadow-reverse

shadow-reverse-sm

--shadow-reverse-sm

Radius

Corners stay tight — nothing above 10px except pills (avatars, true pill badges).

rounded-sm

--radius-sm

rounded-md

--radius-base

rounded-lg

--radius-lg

rounded-4xl

--radius-pill

Border widths

Bare border resolves to 2px for controls; containers use the explicit border-3.

Controls

border-2

Buttons, inputs, badges — the bare `border` utility.

Containers

border-3

Cards, panels, sheets, dialogs.

Components

Every component in packages/ui/src/components, with its variants where it has them.

Accordion

Avatar

KKKKKK
AB
+3

Badge

Badge

variant="default"

Badge

variant="secondary"

Badge

variant="success"

Badge

variant="warning"

Badge

variant="destructive"

Badge

variant="outline"

Badge

variant="ghost"

Badge

variant="link"

Button

variant="default" size="default"

variant="default" size="xs"

variant="default" size="sm"

variant="default" size="lg"

variant="default" size="icon"

variant="default" size="icon-xs"

variant="default" size="icon-sm"

variant="default" size="icon-lg"

variant="outline" size="default"

variant="outline" size="xs"

variant="outline" size="sm"

variant="outline" size="lg"

variant="outline" size="icon"

variant="outline" size="icon-xs"

variant="outline" size="icon-sm"

variant="outline" size="icon-lg"

variant="secondary" size="default"

variant="secondary" size="xs"

variant="secondary" size="sm"

variant="secondary" size="lg"

variant="secondary" size="icon"

variant="secondary" size="icon-xs"

variant="secondary" size="icon-sm"

variant="secondary" size="icon-lg"

variant="ghost" size="default"

variant="ghost" size="xs"

variant="ghost" size="sm"

variant="ghost" size="lg"

variant="ghost" size="icon"

variant="ghost" size="icon-xs"

variant="ghost" size="icon-sm"

variant="ghost" size="icon-lg"

variant="destructive" size="default"

variant="destructive" size="xs"

variant="destructive" size="sm"

variant="destructive" size="lg"

variant="destructive" size="icon"

variant="destructive" size="icon-xs"

variant="destructive" size="icon-sm"

variant="destructive" size="icon-lg"

variant="link" size="default"

variant="link" size="xs"

variant="link" size="sm"

variant="link" size="lg"

variant="link" size="icon"

variant="link" size="icon-xs"

variant="link" size="icon-sm"

variant="link" size="icon-lg"

Card

Default
size="default"
Card content.
Small
size="sm"
Card content.

Checkbox

Collapsible

Content appears when the section is expanded.

Combobox

Container

max-w-7xl, centered, with side padding

Dialog

Empty

No results
Try a different search.

<EmptyMedia variant="default" />

No results
Try a different search.

<EmptyMedia variant="icon" />

Form

Your full name.

Input

Input Group

Label

Marquee

TypeScriptReactNext.jsNode.jsSanity

Select

Separator

Above

Below

LeftRight

Sheet

Skeleton

Sonner (Toast)

Spinner

Tabs

One

<TabsList variant="default" />

One

<TabsList variant="line" />

Textarea

Tooltip