Skip to content
fulldev/ui logo fulldev/ui
X

Theme Toggle

---
import { ThemeToggle } from "@/components/ui/theme-toggle"
---


<ThemeToggle />

Installation

Section titled “Installation”

To install the Theme Toggle component, run the following command:

Terminal window
npx shadcn@latest add @fulldev/theme-toggle

Setup

Section titled “Setup”

The Theme Toggle requires the Theme Provider to be placed in your document’s <head> to prevent flash of unstyled content (FOUC) and persist theme preferences.

Add the provider to your layout’s head section:

---
import { ThemeProvider } from "@/components/ui/theme-toggle"
---


<html>
  <head>
    <ThemeProvider />
    <!-- other head elements -->
  </head>
  <body>
    <!-- your content -->
  </body>
</html>

Usage

Section titled “Usage”
import { ThemeToggle } from "@/components/ui/theme-toggle"
<ThemeToggle />