Dark Mode

Built-in Dark Mode Support

🌙 All ShadcnStore blocks come with built-in dark mode support! Every block is designed to automatically adapt to dark mode using Tailwind CSS dark mode classes like dark:bg-gray-900, dark:text-white, etc.

You don't need to modify any block code - they work seamlessly with your dark mode implementation.

Quick Setup

Here's a simple dark mode toggle example:

"use client"

import { useState } from 'react'

export default function DarkModeToggle() {
  const [isDark, setIsDark] = useState(false)

  const toggleDarkMode = () => {
    setIsDark(!isDark)
    document.documentElement.classList.toggle('dark')
  }

  return (
    <button onClick={toggleDarkMode}>
      {isDark ? '☀️' : '🌙'}
    </button>
  )
}

Framework Integration

For detailed framework-specific dark mode implementations, visit the official shadcn/ui dark mode documentation:

• Next.js: Next.js Dark Mode Guide
• Vite: Vite Dark Mode Guide
• Remix: Remix Dark Mode Guide
• Astro: Astro Dark Mode Guide

That's It!

ShadcnStore blocks automatically inherit your dark mode configuration. Focus on building amazing features while we handle the theming! ✨