Themes

Pick a preset or customize with theme variables.

Built-in Themes

Theme	Value	Description
Notion	`"notion"`	Clean, collaborative feel with flat messages and comfortable spacing.
Cursor	`"cursor"`	IDE-inspired compact layout with monospace-friendly rendering.
Minimal	`"minimal"`	Stripped-down interface with maximum content focus and relaxed spacing.

app/page.tsx

import { AgentChat } from "@21st-sdk/react"

export default function MyAgent() {
  return (
    <AgentChat
      agent="my-agent"
      userId={user.id}
      theme="notion"
    />
  )
}

Custom Theme

For full control, create a theme.json with CSS custom properties. It has three sections: theme (shared), light, and dark (mode-specific colors). Use the Theme Builder to generate this file visually.

app/page.tsx

import theme from "./theme.json"
import { AgentChat } from "@21st-sdk/react"

export default function MyAgent() {
  return (
    <AgentChat
      agent="my-agent"
      userId={user.id}
      theme={theme}
    />
  )
}

Variable Reference

All available CSS custom properties grouped by category.

Want a fully custom look?

Use the visual Theme Builder to configure every aspect with live preview.

Open Theme Builder