> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/BankkRoll/tweakcn-theme-picker/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CardGroup cols={2}>
  <Card title="Claude" icon="message">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-claude.json
    ```
  </Card>

  <Card title="Vercel" icon="triangle">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-vercel.json
    ```
  </Card>

  <Card title="T3 Chat" icon="comments">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-t3-chat.json
    ```
  </Card>

  <Card title="Twitter" icon="bird">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-twitter.json
    ```
  </Card>

  <Card title="Bold Tech" icon="bolt">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-bold-tech.json
    ```
  </Card>

  <Card title="Supabase" icon="database">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-supabase.json
    ```
  </Card>

  <Card title="Twitch" icon="tv">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-twitch.json
    ```
  </Card>

  <Card title="Kick" icon="circle-play">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-kick.json
    ```
  </Card>

  <Card title="Spotify" icon="music">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-spotify.json
    ```
  </Card>

  <Card title="Stripe" icon="credit-card">
    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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-stripe.json
    ```
  </Card>

  <Card title="GitHub" icon="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

    ```bash theme={null}
    npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-github.json
    ```
  </Card>
</CardGroup>

## Installation

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

```bash theme={null}
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:

```tsx theme={null}
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>
  );
}
```