Skip to main content

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.

Creative themes push boundaries with bold designs, unique aesthetics, and artistic flair. Perfect for applications that want to stand out.

​
Available Themes

Cyberpunk

Neon-soaked futuristic aestheticColors
  • Light: oklch(0.67 0.29 341.41) - Hot pink
  • Dark: oklch(0.67 0.29 341.41) - Hot pink
Font: Outfit, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-cyberpunk.json

Neo Brutalism

Bold, brutalist design with strong orange accentColors
  • Light: oklch(0.65 0.24 26.97) - Burnt orange
  • Dark: oklch(0.70 0.19 23.19) - Warm orange
Font: DM Sans, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-neo-brutalism.json

Doom 64

Retro gaming inspired by classic DoomColors
  • Light: oklch(0.5 0.19 27.48) - Dark red
  • Dark: oklch(0.61 0.21 27.03) - Blood red
Font: Oxanium, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-doom-64.json

Kodama Grove

Nature-inspired with serene green tonesColors
  • Light: oklch(0.67 0.11 118.91) - Sage green
  • Dark: oklch(0.68 0.06 132.45) - Soft green
Font: Merriweather, serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-kodama-grove.json

Quantum Rose

Scientific meets romantic with pink-red huesColors
  • Light: oklch(0.6 0.24 0.13) - Deep rose
  • Dark: oklch(0.75 0.23 332.02) - Bright rose
Font: Poppins, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-quantum-rose.json

Elegant Luxury

Sophisticated gold and brown luxury aestheticColors
  • Light: oklch(0.47 0.15 24.94) - Rich brown
  • Dark: oklch(0.51 0.19 27.52) - Warm brown
Font: Poppins, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-elegant-luxury.json

Claymorphism

Modern 3D clay-like design trendColors
  • Light: oklch(0.59 0.2 277.12) - Soft purple
  • Dark: oklch(0.68 0.16 276.93) - Light purple
Font: Plus Jakarta Sans, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-claymorphism.json

Retro Arcade

80s arcade game nostalgiaColors
  • Light: oklch(0.59 0.2 355.89) - Hot pink
  • Dark: oklch(0.59 0.2 355.89) - Hot pink
Font: Outfit, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-retro-arcade.json

Vintage Paper

Aged paper with serif typographyColors
  • Light: oklch(0.62 0.08 65.54) - Sepia
  • Dark: oklch(0.73 0.06 66.7) - Cream
Font: Libre Baskerville, serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-vintage-paper.json

Windows 98

Nostalgic 90s operating system aestheticColors
  • Light: oklch(0.2711 0.1879 264.0520) - Win98 blue
  • Dark: oklch(0.2711 0.1879 264.0520) - Win98 blue
Font: Pixelify Sans, sans-serif
npx shadcn@latest add https://tweakcn-picker.vercel.app/r/theme-windows98.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 creative theme from above using its installation command.

​
Usage

Switch to a creative theme programmatically: 
import { useTheme } from "next-themes";

export function ThemeExample() {
  const { setTheme } = useTheme();
  
  return (
    <div>
      <button onClick={() => setTheme("cyberpunk-dark")}>
        Cyberpunk Dark
      </button>
      <button onClick={() => setTheme("neo-brutalism-light")}>
        Neo Brutalism Light
      </button>
      <button onClick={() => setTheme("windows98-dark")}>
        Windows 98 Dark
      </button>
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us