Skip to main content
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 assistantColors
  • 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 themeColors
  • 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 aestheticColors
  • 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 blueColors
  • 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 brandsColors
  • 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 greenColors
  • 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 purpleColors
  • 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 greenColors
  • 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 greenColors
  • 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 purpleColors
  • 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 greenColors
  • 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>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us