Match Your Brand

You can make the widget feel like part of your product without replacing any components.

Use this when

• the default widget shape is good and you mainly need branding
• you want a copy-paste way to set colors and radius
• you want the widget to follow your app theme or force dark mode

Pick the simplest path

In many Tailwind + shadcn apps, the widget already feels native after you import the CSS entrypoint. Start with the smallest option that matches what you need.

Theme precedence

The widget resolves theme values in this order:

1. Explicit --co-theme-* overrides you set on .cossistant
2. Host shadcn-style tokens like --background, --primary, --radius, and --font-sans
3. Built-in Cossistant defaults

That means the widget will already feel closer to your app in many setups before you write any extra theme CSS.

Do nothing in many shadcn apps

If your app already exposes the usual shadcn-style tokens on :root and .dark, the widget picks them up automatically. No extra theme mapping is needed to start.

Render <Support />, import either support.css or styles.css, and see how far the automatic host theme gets you before you add overrides.

What gets inherited automatically

The default widget looks for these host tokens today:

• --background
• --foreground
• --popover
• --popover-foreground
• --primary
• --primary-foreground
• --secondary
• --secondary-foreground
• --muted
• --muted-foreground
• --accent
• --accent-foreground
• --border
• --input
• --ring
• --destructive
• --destructive-foreground
• --radius
• --font-sans
• --font-mono

Dark mode follows your app automatically too. The widget checks for .dark on an ancestor or data-color-scheme="dark" on the widget root.

This automatic adoption is intentionally scoped to standard shadcn-style base tokens:

• colors
• radius
• fonts
• dark mode

Pin widget values

Set the widget tokens once and keep the default UI.

Copy.cossistant {
  --co-theme-primary: #111827;
  --co-theme-primary-foreground: #ffffff;
  --co-theme-background: #ffffff;
  --co-theme-foreground: #111827;
  --co-theme-border: #e5e7eb;
  --co-theme-radius: 0px;
}

That is usually enough when you want to pin the widget to your own values instead of relying on the host tokens.

Force dark mode

Copyimport { Support } from "@cossistant/react";
 
<Support theme="dark" />;

By default, the widget follows your app theme. Use theme="dark" when the widget should stay dark instead of following the page theme.

Pin the widget to your shadcn tokens

This is still useful when you want the widget theme to stay explicitly linked to your app tokens, even if you later rename or swap the host token source.

Copy:root {
  --co-theme-background: var(--background);
  --co-theme-foreground: var(--foreground);
  --co-theme-primary: var(--primary);
  --co-theme-primary-foreground: var(--primary-foreground);
  --co-theme-border: var(--border);
  --co-theme-radius: var(--radius);
}

What is not inherited automatically

The widget inherits CSS design tokens, radius, fonts, and dark mode. It does not inherit arbitrary compile-time Tailwind config such as:

• custom spacing scales
• custom shadow scales
• custom plugin utilities
• unrelated utility renames or variants

If your app uses custom token names outside the standard shadcn-style base tokens, map them explicitly into --co-theme-*.

When to stop here

• colors, radius, and dark mode are enough
• you want the default layout to stay in place
• you do not need custom pages or a custom shell

Next step

• Pages & Layouts when you need a different first screen, an inline embed, or your own shell
• Copy & Locale when the next change is wording instead of UI

Core token reference

Extra tokens

Use these when the core tokens are not enough:

Status colors

Avatar accents

Background shades

The background shades are derived from your base colors with color-mix() unless you override them directly.