Theming

Tokens

Nothing in this registry defines a color of its own. If your project ran shadcn init, these are already in your globals.css.

Dark mode

Dark styling is class based: define the same variables under .dark, and drive that class with next-themes. The two components that read the resolved theme directly — ThemeToggle and the Shiki/Mermaid renderers — pick it up from the same provider.

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.32 0 0);
  --primary: oklch(0.62 0.19 259.81);
  --sidebar: oklch(0.98 0.003 247.84);
  --radius: 0.375rem;
}

.dark {
  --background: oklch(0.2 0 0);
  --foreground: oklch(0.92 0 0);
  --primary: oklch(0.62 0.19 259.81);
  --sidebar: oklch(0.2 0 0);
}

Restyling a component

Three levers, in order of how far they reach. None of them require editing the installed file.

<ChatInput className="max-w-2xl" />
<Message sender="user" content={text} contentClassName="bg-primary/10" />
<ChatSidebar classNames={{ header: "pt-4", content: "px-3" }} />

// Square off the composer card
<ChatInput className="[&_[data-slot=chat-input-surface]]:rounded-xl" />

// Recolor every user turn from the scroll container
<MessageList
  className="[&_[data-slot=message][data-sender=user]_[data-slot=message-content]]:bg-primary/10"
  messages={messages}
/>

// Tint failed tool calls
<div className="[&_[data-slot=message-tool-call][data-status=error]]:text-destructive">
  <MessageToolCalls tools={tools} />
</div>

import { ChatInput, chatInputButtonVariants } from "@/components/ui/chat-input"

<ChatInput
  tools={
    <button className={cn(chatInputButtonVariants(), "text-primary")}>
      <Globe />
      <span>Search</span>
    </button>
  }
  onSend={send}
/>

Scaling the whole UI

An app that offers a zoom control cannot simply put zoom on <html>. Radix portals render into <body>, so a menu, a popover or a context menu would land inside the scaled subtree, where Floating UI measures rects in visual pixels and writes the result into a layout-unit box — every menu drifts off screen by the scale factor.

So the scale is published as a variable and applied to a wrapper inside the body instead, and each portalled surface scales itself. Anchor, content and viewport then stay in one coordinate space, and the menu comes out the right size in the right place. Two edits do it, both in your own copies of the shadcn primitives — PopoverContent, DropdownMenuContent and ContextMenuContent, which this registry lists as dependencies rather than ships. Sub-content is not portalled, so it deliberately does not repeat the scale: it inherits its parent's.

The widths are the part that catches people out: vw is not scaled by zoom, so a clamp against the viewport has to divide it back out. Every picker in this registry already does — ModelPicker, ModePicker, FolderPicker. Radix's available-height variable has the same problem: it is measured before the portal content is zoomed, so DropdownMenuContent divides it by the scale before using it as its max-height — otherwise a long menu clips above 100% and wastes room below it.

/* On the app wrapper, not on <html> — portals must stay outside it. */
<div style={{ zoom: "var(--ui-scale, 1)" }}>{children}</div>

/* In PopoverContent / DropdownMenuContent / ContextMenuContent */
className={cn("[zoom:var(--ui-scale,1)]", …)}

/* A viewport-clamped width inside a portal: vw is not scaled by zoom */
className="w-[min(17rem,calc((100vw-1.5rem)/var(--ui-scale,1)))]"

/* DropdownMenuContent: Radix measures the available height before the
   content is zoomed, so divide it back out or the menu clips at > 100% */
className="max-h-[calc(var(--radix-dropdown-menu-content-available-height)/var(--ui-scale,1))]"

Set nothing and every one of these is a no-op — var(--ui-scale, 1) falls back to 1.

House rules

• Focus on a control is always a 3px ring-ring/50 — keep it if you restyle one, and never trade it for outline-none alone. Large surfaces that merely contain a focused field — the composer card, the edit bubble — shift their border to border-ring instead, because a ring that wide reads as an error state.
• UI text sits on a text-[13px]—text-[15px] scale; message bodies are 15px with a 1.65 line height.
• Mobile textareas are text-base on purpose — anything smaller makes iOS Safari zoom on focus.
• Icons are normalized to size-4 unless they already carry a size class.