---
title: Theming
description: Customize colors, fonts, and styling
---

ChatJS uses standard [shadcn theming](https://ui.shadcn.com/docs/theming) with CSS variables. If you're familiar with shadcn, everything works as expected.

This also applies to [AI Elements](https://ai-sdk.dev/elements/overview) 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](https://ui.shadcn.com/themes) to create a palette, then copy the CSS variables into `globals.css`.