Skip to content
ChatJS
Esc
↑↓navigate↵open⌘Jpreview
On this page

Theming

Customize colors, fonts, and styling

ChatJS uses standard shadcn theming with CSS variables. If you’re familiar with shadcn, everything works as expected.

This also applies to AI Elements components since they’re shadcn-compatible and read the same CSS variables.

Quick start

  1. Open app/globals.css
  2. Edit the CSS variables in :root (light) and .dark (dark)

Generate a theme

Use the shadcn theme generator to create a palette, then copy the CSS variables into globals.css.

Last updated on Sep 12, 2026

Was this page helpful?