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.

npx shadcn@latest add https://shuip.plvo.dev/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:

Examples

Default

Text

Props

Name	Type	Description
withText	`boolean?`	Whether to display the text