shuip

Theme Button

Provides an elegant and user-friendly way to cycle through light, dark, and system themes. It's specifically designed to work with next-themes, the most popular theme management library for Next.js applications.

Installation

npx shadcn@latest add https://shuip.xyz/r/theme-button.json

Preview

Ready-to-use theme toggle

The button automatically cycles through these states:

  • System: Uses the user's OS preference (🖥️ Laptop icon)
  • Light: Forces light mode (☀️ Sun icon)
  • Dark: Forces dark mode (🌙 Moon icon)

With ThemeButton, a complete theme switcher in one line:

// With ThemeButton - simple and complete
<ThemeButton />


// With text label
<ThemeButton withText={true} />

Setup with next-themes

First, make sure you have next-themes installed and configured:

Common use cases

// Header navigation
<header className="flex items-center justify-between p-4">
<Logo />
<nav className="flex items-center space-x-4">
  <NavigationMenu />
  <ThemeButton />
</nav>
</header>


// Settings page
<div className="space-y-4">
<h3 className="text-lg font-medium">Appearance</h3>
<div className="flex items-center justify-between">
  <div>
    <p className="text-sm font-medium">Theme</p>
    <p className="text-sm text-muted-foreground">
      Choose your preferred theme
    </p>
  </div>
  <ThemeButton withText={true} />
</div>
</div>


// Sidebar
<aside className="w-64 p-4">
<nav className="space-y-2">
  <SidebarLink href="/dashboard">Dashboard</SidebarLink>
  <SidebarLink href="/settings">Settings</SidebarLink>
</nav>
<div className="mt-auto pt-4">
  <ThemeButton withText={true} />
</div>
</aside>


// Mobile menu
<Sheet>
<SheetContent>
  <div className="flex flex-col space-y-4">
    <MobileNavLinks />
    <div className="border-t pt-4">
      <ThemeButton withText={true} />
    </div>
  </div>
</SheetContent>
</Sheet>

Examples

Default

Text

Props

NameTypeDescription
withTextboolean?Whether to display the text