Skip to main content

​
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.
This project is not affiliated with tweakcn. Themes are inspired by and adapted from the tweakcn theme collection.

​
Key features

43+ themes

Choose from minimal, colorful, branded, creative, and dark theme categories

Light & dark modes

Every theme includes both light and dark mode variants

OKLCH colors

Perceptually uniform colors for consistent visual experiences

Custom fonts

Each theme includes carefully selected typography

Framework adapters

Native support for Next.js, Vite, Astro, and Remix

Single command

Install via shadcn CLI with one command

​
Quick start

Get started in seconds with the shadcn CLI: 
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/nextjs/theme-system.json
Then add individual themes: 
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

Next.js

Install theme system for Next.js App Router

Vite

Set up themes in Vite + React projects

Astro

Add themes to Astro with React islands

Remix

Configure themes with Remix SSR

​
Explore themes

Browse our theme catalog by category:

Minimal

6 clean, understated themes

Colorful

11 vibrant, expressive themes

Branded

11 themes inspired by popular brands

Creative

10 unique, artistic themes

Dark

5 themes optimized for dark mode

All themes

Complete theme catalog

​
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

Installation

Complete installation guide

Theme Provider

Configure the ThemeProvider component

Theme Switcher

Add a theme switcher to your UI

API Reference

Explore the complete API

Build docs developers (and LLMs) love

Get started for freeTalk to us