next-themes

Perfect dark mode in two lines — the theme switcher shadcn/ui recommends, with zero flash on load.

next-themes

React

Perfect dark mode in two lines — the theme switcher shadcn/ui recommends, with zero flash on load.

npm GitHub Docs

Fit

Bundle (gzip)

1.6 kB

3.4 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Implementing dark mode yourself invites the dreaded flash of the wrong theme on first paint, plus you have to persist the choice, respect the OS prefers-color-scheme, and sync across tabs. Getting all of that right is surprisingly fiddly.

What It Does

next-themes handles theme state for React/Next.js apps: it persists the selection, honors the system preference, syncs across tabs, and injects a tiny inline script so the correct class/data-theme is set before hydration — eliminating the flash. It's the standard companion to shadcn/ui's dark mode setup.

Installation

bash

npm install next-themes

Usage Example

jsx

import { ThemeProvider, useTheme } from 'next-themes';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle theme
    </button>
  );
}

export function App({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
      {children}
    </ThemeProvider>
  );
}

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.