Theming

Your tokens

The screens use the standard shadcn/ui tokens and nothing else: background, card, muted, accent, primary, border, ring, destructive and --radius. Change your theme and the inbox follows. Internal notes use an amber tint so they're never mistaken for replies.

:root {
  --primary: oklch(0.52 0.19 258);
  --radius: 0.5rem;
}

Try it on the home page or in the demo: the color, radius and font controls change these same variables.

Your components

The screens import @/components/ui/button, badge, input, textarea, select, dialog, dropdown-menu and skeleton. If you've restyled those, the inbox already looks like the rest of your app.

Right to left

Layout uses logical properties (ms-*, pe-*, text-start) and user text renders with dir="auto", so Arabic and Hebrew work in a right-to-left page, and a mixed inbox shows each message in its own direction.

Changing the screens

It's your code: edit components/support/* freely. To keep upstream fixes easy to take, put your changes in wrappers (the provider, your customerPanel, your pages) rather than in the shared screens where you can. See Upgrading.