> ## 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.

# Introduction

> Add 43+ beautiful themes to your shadcn/ui app with a single command. OKLCH colors, custom fonts, and light/dark mode support for every theme.

# Welcome to tweakcn Theme Picker

Easily add 43+ themes with support for light and dark modes. Add a complete theme picker to your shadcn/ui app with a single command. OKLCH colors, custom fonts, light & dark modes for every theme.

<Note>
  This project is not affiliated with tweakcn. Themes are inspired by and adapted from the tweakcn theme collection.
</Note>

## Key features

<CardGroup cols={2}>
  <Card title="43+ themes" icon="palette">
    Choose from minimal, colorful, branded, creative, and dark theme categories
  </Card>

  <Card title="Light & dark modes" icon="moon">
    Every theme includes both light and dark mode variants
  </Card>

  <Card title="OKLCH colors" icon="droplet">
    Perceptually uniform colors for consistent visual experiences
  </Card>

  <Card title="Custom fonts" icon="font">
    Each theme includes carefully selected typography
  </Card>

  <Card title="Framework adapters" icon="code">
    Native support for Next.js, Vite, Astro, and Remix
  </Card>

  <Card title="Single command" icon="terminal">
    Install via shadcn CLI with one command
  </Card>
</CardGroup>

## Quick start

Get started in seconds with the shadcn CLI:

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

  ```bash Vite theme={null}
  npx shadcn@latest add https://tweakcn-picker.vercel.app/r/vite/theme-system.json
  ```

  ```bash Astro theme={null}
  npx shadcn@latest add https://tweakcn-picker.vercel.app/r/astro/theme-system.json
  ```

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

Then add individual themes:

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

## Installation guides

<CardGroup cols={2}>
  <Card title="Next.js" icon="react" href="/guides/nextjs">
    Install theme system for Next.js App Router
  </Card>

  <Card title="Vite" icon="bolt" href="/guides/vite">
    Set up themes in Vite + React projects
  </Card>

  <Card title="Astro" icon="rocket" href="/guides/astro">
    Add themes to Astro with React islands
  </Card>

  <Card title="Remix" icon="remix" href="/guides/remix">
    Configure themes with Remix SSR
  </Card>
</CardGroup>

## Explore themes

Browse our theme catalog by category:

<CardGroup cols={2}>
  <Card title="Minimal" icon="circle" href="/themes/minimal">
    6 clean, understated themes
  </Card>

  <Card title="Colorful" icon="sparkles" href="/themes/colorful">
    11 vibrant, expressive themes
  </Card>

  <Card title="Branded" icon="building" href="/themes/branded">
    11 themes inspired by popular brands
  </Card>

  <Card title="Creative" icon="wand-magic-sparkles" href="/themes/creative">
    10 unique, artistic themes
  </Card>

  <Card title="Dark" icon="moon" href="/themes/dark">
    5 themes optimized for dark mode
  </Card>

  <Card title="All themes" icon="list" href="/themes/overview">
    Complete theme catalog
  </Card>
</CardGroup>

## How it works

The tweakcn Theme Picker is built on:

* **CSS variables** - Themes are defined using CSS custom properties
* **OKLCH color space** - Perceptually uniform colors for better consistency
* **Tailwind CSS v4** - Modern utility-first CSS framework
* **shadcn/ui registry** - Distributed as composable registry components
* **next-themes** (Next.js/Vite) - Lightweight theme management library

Themes follow the naming convention `{name}-{mode}`, where mode is either `light` or `dark`. For example: `catppuccin-light`, `cyberpunk-dark`, `vercel-light`.

## What's included

When you install the theme system, you get:

* **ThemeProvider** - React context provider for theme state
* **ThemeSwitcher** - Dropdown component for selecting themes
* **useTheme hook** - Programmatic theme control
* **Theme CSS files** - All theme color definitions
* **themes-config.ts** - Theme metadata and configuration

## Next steps

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/installation">
    Complete installation guide
  </Card>

  <Card title="Theme Provider" icon="wrench" href="/usage/theme-provider">
    Configure the ThemeProvider component
  </Card>

  <Card title="Theme Switcher" icon="toggle-on" href="/usage/theme-switcher">
    Add a theme switcher to your UI
  </Card>

  <Card title="API Reference" icon="code" href="/api/theme-config">
    Explore the complete API
  </Card>
</CardGroup>