Theming & Branding

ContentAI uses Tailwind CSS 4 with CSS custom properties defined by shadcn/ui. That means theming is a couple of edits to app/globals.css — not a refactor.

Change the name

The product name "ContentAI" appears in a handful of places:

A find-and-replace of ContentAI across the project will cover everything.

Change the logo

The default app sidebar uses the Sparkles Lucide icon. Replace it with your own SVG or Image:

// components/app-sidebar.tsx
// Before
<Sparkles className="h-5 w-5 text-primary" />

// After
<Image src="/logo.svg" alt="Your Brand" width={20} height={20} />

Drop logo.svg in the public/ folder.

For a full brand image on the landing page, swap the Sparkles icon in app/page.tsx.

Change the color palette

Open app/globals.css. The theme lives inside the @theme inline block:

@theme inline {
  --color-primary: hsl(221.2 83.2% 53.3%);        /* blue */
  --color-primary-foreground: hsl(210 40% 98%);
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(222.2 84% 4.9%);
  /* ... */
}

Change --color-primary (and its primary-foreground for text on top) to your brand hue and the entire app updates — buttons, badges, focus rings, gradients, sidebar active states.

Dark mode

Dark-mode overrides live under .dark { ... } further down globals.css. Tailwind's dark: modifier is already wired up; add a theme switcher by calling useTheme() from next-themes (already installed).

Preset palettes

Want a completely different feel? Replace the whole :root { ... } and .dark { ... } blocks with any palette from tweakcn or shadcn/themes. Both generate drop-in CSS.

Change the font

Fonts come from next/font in app/layout.tsx:

import { Inter } from "next/font/google";

const inter = Inter({ subsets: ["latin"] });

Swap Inter for any Google Font, e.g. Geist, Manrope, Plus_Jakarta_Sans. No other changes needed.

Change the landing page

The landing page is a single file: app/page.tsx. It's a regular React component — edit copy, reorder sections, remove unwanted parts. The UI components it uses (Button, Card, Badge) are in components/ui/.

Sidebar navigation

components/app-sidebar.tsx has an array that controls the links:

const items = [
  { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
  { title: "Templates", url: "/templates", icon: LayoutGrid },
  { title: "Generate", url: "/generate", icon: Sparkles },
  { title: "Editor", url: "/editor", icon: FileEdit },
  { title: "History", url: "/history", icon: History },
  { title: "Settings", url: "/settings", icon: Settings },
];

Add, remove, or reorder as you like.

Favicons and social cards

• Favicon — replace app/favicon.ico
• Open Graph image — add an opengraph-image.png to app/
• Twitter card — add twitter-image.png to app/

Next.js picks these up automatically based on file conventions.

Next: Customizing Templates →