Theming

Aomi components follow shadcn conventions. Since component source files are copied into your project, you have full control over styling.

CSS Variables

shadcn uses HSL CSS variables for theming. Define them in your global CSS:

/* globals.css */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --border: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --border: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

Components reference these variables through Tailwind:

<div className="bg-background text-foreground border-border" />

Dark Mode

Components use the .dark class for dark mode. Toggle with your preferred method:

// Using next-themes
import { ThemeProvider } from "next-themes";

<ThemeProvider attribute="class" defaultTheme="system">
  <AomiFrame />
</ThemeProvider>

Both light and dark variants are defined in the CSS variables above. The .dark class on a parent element activates the dark palette.

Common Customizations

Custom Colors

Override the color variables to match your brand:

:root {
  --primary: 221.2 83.2% 53.3%;          /* Blue */
  --primary-foreground: 210 40% 98%;
}

Border Radius

Adjust the global radius variable:

:root {
  --radius: 0.75rem;  /* More rounded */
}

Message Bubbles

Edit components/assistant-ui/thread.tsx directly:

<div
  className={cn(
    "rounded-lg px-4 py-2",
    isUser ? "bg-primary text-primary-foreground" : "bg-muted",
  )}
>
  {content}
</div>

Edit components/assistant-ui/threadlist-sidebar.tsx:

<Sidebar className="w-64">  {/* Default is w-64 (256px) */}

Frame Container

Add Tailwind classes to the AomiFrame:

<AomiFrame
  className="rounded-xl shadow-lg"
  style={{ height: "calc(100vh - 80px)" }}
/>

The `cn` Utility

Use the cn helper (clsx + tailwind-merge) to merge classes conditionally:

import { cn } from "@aomi-labs/react";

<div
  className={cn(
    "base-styles",
    isActive && "active-styles",
    className,  // Allow overrides from props
  )}
/>

Best Practices

Do	Don't
Edit component source directly	Use `!important` overrides
Use CSS variables for colors	Hardcode hex values
Keep Tailwind for layout	Create separate CSS files
Extend the theme in `tailwind.config`	Override everything inline