Branded Themes

Themes inspired by popular brands and services

Branded themes capture the visual identity of well-known companies and services, perfect for applications that want to match or complement specific brand aesthetics.

Available Themes

Claude

Inspired by Anthropic’s Claude AI assistant

Colors

• Light: oklch(0.62 0.14 39.04) - Warm orange-brown
• Dark: oklch(0.67 0.13 38.76) - Light tan

Font: system-ui, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-claude.json

Vercel

The iconic Vercel black and white theme

Colors

• Light: oklch(0 0 0) - Pure black
• Dark: oklch(1 0 0) - Pure white

Font: Geist, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-vercel.json

T3 Chat

Modern chat application aesthetic

Colors

• Light: oklch(0.53 0.14 355.2) - Deep rose
• Dark: oklch(0.46 0.19 4.1) - Rich red

Font: system-ui, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-t3-chat.json

Twitter

Classic Twitter blue

Colors

• Light: oklch(0.67 0.16 245) - Twitter blue
• Dark: oklch(0.67 0.16 245.01) - Twitter blue

Font: Open Sans, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-twitter.json

Bold Tech

Vibrant purple for modern tech brands

Colors

• Light: oklch(0.61 0.22 292.72) - Bold purple
• Dark: oklch(0.61 0.22 292.72) - Bold purple

Font: Roboto, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-bold-tech.json

Supabase

Supabase brand green

Colors

• Light: oklch(0.83 0.13 160.91) - Bright green
• Dark: oklch(0.44 0.1 156.76) - Dark green

Font: Outfit, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-supabase.json

Twitch

Twitch streaming platform purple

Colors

• Light: oklch(0.54 0.24 292) - Deep purple
• Dark: oklch(0.60 0.22 292) - Twitch purple

Font: Inter, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-twitch.json

Kick

Kick streaming platform green

Colors

• Light: oklch(0.75 0.26 135) - Bright lime
• Dark: oklch(0.83 0.28 135) - Neon green

Font: Inter, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-kick.json

Spotify

Spotify’s signature green

Colors

• Light: oklch(0.64 0.20 155) - Spotify green
• Dark: oklch(0.68 0.20 155) - Bright green

Font: Montserrat, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-spotify.json

Stripe

Stripe payment platform purple

Colors

• Light: oklch(0.55 0.24 280) - Deep purple
• Dark: oklch(0.65 0.22 280) - Stripe purple

Font: system-ui, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-stripe.json

GitHub

GitHub’s classic green

Colors

• Light: oklch(0.52 0.16 145) - Deep green
• Dark: oklch(0.62 0.16 145) - GitHub green

Font: system-ui, sans-serif

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-github.json

Installation

Install the theme system first (if you haven’t already):

npx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system.json

Then add any branded theme from above using its installation command.

Usage

Switch to a branded theme programmatically:

import { useTheme } from "next-themes";

export function ThemeExample() {
  const { setTheme } = useTheme();
  
  return (
    <div>
      <button onClick={() => setTheme("vercel-dark")}>
        Vercel Dark
      </button>
      <button onClick={() => setTheme("twitter-light")}>
        Twitter Light
      </button>
      <button onClick={() => setTheme("supabase-dark")}>
        Supabase Dark
      </button>
    </div>
  );
}