UI Themes

UI Themes

Generate and customize shadcn/ui themes using tweakcn and enhance with Magic UI animated components. This skill covers theme selection, dark mode setup, and animation integration.

When to Use This Skill

• Setting up a new project's visual theme
• Customizing shadcn/ui color schemes
• Adding dark mode support
• Integrating animated UI components
• Choosing a design direction for a project

Part 1: Theme Generation with tweakcn

tweakcn is a visual theme editor for shadcn/ui that exports production-ready CSS variables.

Workflow

1. Visit tweakcn.com/editor/theme
2. Select a preset that matches your design direction
3. Customize colors, typography, and radius if needed
4. Export CSS variables to your project
5. Update globals.css with the exported theme

Preset Selection Guide

Choose a preset based on your product's personality:

Export Options

tweakcn supports multiple export formats:

• OKLCH (recommended) - Best color accuracy across displays
• HSL - Traditional CSS format, widest compatibility
• RGB/Hex - Direct color values

Integration Steps

1. Replace globals.css Theme

Replace the :root and .dark sections in globals.css with tweakcn export:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* tweakcn exported variables go here */
    --background: 0 0% 100%;
    --foreground: 224 71% 4%;
    /* ... rest of light theme */
  }

  .dark {
    /* tweakcn exported dark variables */
    --background: 224 71% 4%;
    --foreground: 210 20% 98%;
    /* ... rest of dark theme */
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

2. Set Default Theme

For dark mode default, add className="dark" to the html element:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className="dark">
      <body>{children}</body>
    </html>
  )
}

3. Sidebar Colors (Optional)

If using a sidebar layout, tweakcn includes sidebar-specific variables:

--sidebar-background: ...;
--sidebar-foreground: ...;
--sidebar-primary: ...;
--sidebar-primary-foreground: ...;
--sidebar-accent: ...;
--sidebar-accent-foreground: ...;
--sidebar-border: ...;
--sidebar-ring: ...;

Part 2: Magic UI Components

Magic UI provides 150+ animated React components that integrate with shadcn/ui.

Installation

Magic UI uses the shadcn CLI for installation:

# Install individual components
pnpm dlx shadcn@latest add @magicui/component-name

# Examples
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/shimmer-button

Components install to components/ui/ alongside existing shadcn components.

Essential Components for Themes

Animated Theme Toggler

Smooth dark/light mode toggle with animation:

pnpm dlx shadcn@latest add @magicui/animated-theme-toggler

import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"

<AnimatedThemeToggler />

Magic Card

Hover effects with gradient tracking - perfect for cards and grid items:

pnpm dlx shadcn@latest add @magicui/magic-card

import { MagicCard } from "@/components/ui/magic-card"

<MagicCard className="p-6">
  <h3>Card Title</h3>
  <p>Card content with gradient hover effect</p>
</MagicCard>

Shimmer Button

Premium CTA buttons with shimmer loading state:

pnpm dlx shadcn@latest add @magicui/shimmer-button

import { ShimmerButton } from "@/components/ui/shimmer-button"

<ShimmerButton>Get Started</ShimmerButton>

Blur Fade

Smooth entrance animations for content:

pnpm dlx shadcn@latest add @magicui/blur-fade

import { BlurFade } from "@/components/ui/blur-fade"

<BlurFade delay={0.1}>
  <div>Content fades in with blur effect</div>
</BlurFade>

Typing Animation

AI-like text reveal for generated content:

pnpm dlx shadcn@latest add @magicui/typing-animation

import { TypingAnimation } from "@/components/ui/typing-animation"

<TypingAnimation text="AI-generated content appears here..." />

Border Beam

Subtle animated border glow:

pnpm dlx shadcn@latest add @magicui/border-beam

import { BorderBeam } from "@/components/ui/border-beam"

<div className="relative">
  <BorderBeam />
  <div>Content with glowing border</div>
</div>

Component Categories

Part 3: Dark Mode Setup

Next.js App Router

Option 1: Static Dark Mode (Default)

Set dark mode as the default without toggle:

// app/layout.tsx
<html lang="en" className="dark">

Option 2: Theme Provider (Toggle)

For user-controlled theme switching, use next-themes:

pnpm add next-themes

// components/theme-provider.tsx
"use client"

import { ThemeProvider as NextThemesProvider } from "next-themes"

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="dark"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </NextThemesProvider>
  )
}

// app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

Theme Toggle Component

Combine with Magic UI's Animated Theme Toggler:

"use client"

import { useTheme } from "next-themes"
import { AnimatedThemeToggler } from "@/components/ui/animated-theme-toggler"

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  
  return (
    <AnimatedThemeToggler
      checked={theme === "dark"}
      => setTheme(checked ? "dark" : "light")}
    />
  )
}

Part 4: Quick Setup Recipes

Recipe: Dark Professional Theme

Best for: Dev tools, dashboards, professional apps

# 1. Get theme from tweakcn (use "graphite" preset)
# 2. Install components
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/shimmer-button
pnpm dlx shadcn@latest add @magicui/blur-fade

Set dark default:

<html lang="en" className="dark">

Recipe: Light with Dark Mode Toggle

Best for: Content apps, documentation, general purpose

# 1. Get theme from tweakcn (use "modern minimal" preset)
# 2. Install dependencies
pnpm add next-themes
pnpm dlx shadcn@latest add @magicui/animated-theme-toggler

Use ThemeProvider with default light.

Recipe: AI Product Theme

Best for: AI tools, chat apps, generative products

# 1. Get theme from tweakcn (use "claude" or "cosmic night" preset)
# 2. Install components
pnpm dlx shadcn@latest add @magicui/typing-animation
pnpm dlx shadcn@latest add @magicui/magic-card
pnpm dlx shadcn@latest add @magicui/blur-fade
pnpm dlx shadcn@latest add @magicui/shimmer-button

Use typing animation for AI-generated content.

Part 5: Best Practices

Do

• Pick a preset that matches your product's personality
• Commit to dark OR light as primary (with optional toggle)
• Use OKLCH color format for best accuracy
• Keep animations subtle (150-250ms)
• Use Magic Card sparingly (1-2 per view)

Don't

• Mix multiple accent colors
• Use heavy animations on every element
• Override shadcn component styles directly
• Skip the theme provider if you need toggle
• Use spring/bouncy animations in professional apps

Performance

• Magic UI components are tree-shakable
• Only install components you actually use
• Blur Fade adds minimal overhead
• Typing Animation should be used sparingly

Reference Links

• tweakcn Theme Editor
• tweakcn Presets
• Magic UI Components
• Magic UI Installation
• shadcn/ui Theming
• next-themes