Introduction
In today’s modern website's, dark mode isn’t just a visual trend—it’s a user expectation. From improving accessibility and reducing eye strain to extending battery life on mobile devices, the dark theme is now a must-have feature in modern web applications.
If you’re building a React or Next.js project with ShadCN, the good news is: adding dark mode is incredibly easy and customizable. In this guide, we’ll show you exactly how to implement a dark theme using ShadCN + Tailwind CSS in just a few simple steps.
Why to use ShadCN for Dark Mode
ShadCN is beautyfull and powerfull component library built on top of:
- Tailwind CSS
- Radix UI
ShadCN makes theme toggling, accessible components, and consistent design token easy to add because of seamless integration with Tailind's Dark mode strategy.
Step-by-Step: Add Email Provider in Next.js using NextAuth
Before starting, make sure your project is set up with:
- Next.js Or React
- Tailwind CSS installed and configuration
First, you have to install ShadCN.
npx shadcn@latest initNow If you are using Next.js run.
npm install next-themeNow Create a theme Provider
"use client"
import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
export function ThemeProvider({ children, ...props }) {
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
Now in your layout.js wrap your children with you theme-provider.js component
import { ThemeProvider } from "@/components/theme-provider"
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
);
}Now to switch the from dark to light mode you have to add a button in your components file
In your components folder make file named as /modeToggle.js
'use client'
import * as React from 'react'
import { Moon, Sun } from 'lucide-react'
import { useTheme } from 'next-themes'
import { Button } from '@/components/ui/button'
export function ModeToggle() {
const { theme, setTheme } = useTheme()
const [mounted, setMounted] = React.useState(false)
React.useEffect(() => {
setMounted(true)
}, [])
if (!mounted) return null
const isDark = theme === 'dark'
const toggleTheme = () => {
setTheme(isDark ? 'light' : 'dark')
}
return (
<Button variant="outline" size="icon" onClick={toggleTheme}>
{isDark ? (
<Sun className="h-[1.2rem] w-[1.2rem]" />
) : (
<Moon className="h-[1.2rem] w-[1.2rem]" />
)}
<span className="sr-only">Toggle theme</span>
</Button>
)
}Now call that component in your header just like this
import { ModeToggle } from '../moon';
const Header = () => {
return (
<ModeToggle />
);
};
export default Header;Final Thoughts
And there you have a fully functional dark mode setup in your ShadCN powered project! Whether you're building a personal portfolio or a complex dashboard, adding theme support elevates user experience and gives your interface a modern, polished feel. The best part? ShadCN and next-themes make the integration effortless and developer-friendly.
Ready to give your users the power to choose how they view your app? Try it out now — and take your UI to the next level. 🌙☀️
.png&w=256&q=75)