Mode Toggle

Preview

Prerequisites

This component requires a theme provider to function properly. If you haven't set one up yet, consider using our complete layout setup:

Layout with Providers →

Installation

npx shadcn@latest add https://jt-components.vercel.app/r/mode-toggle.json

pnpm dlx shadcn@latest add https://jt-components.vercel.app/r/mode-toggle.json

yarn dlx shadcn@latest add https://jt-components.vercel.app/r/mode-toggle.json

bunx --bun shadcn@latest add https://jt-components.vercel.app/r/mode-toggle.json

Usage

import { ModeToggle } from "@/components/mode-toggle"

<ModeToggle />

Source Code

Props

Examples

Change the Dropdown Menu Alignment

The dropdown menu can be aligned to the start, center, or end of the button. This is useful when you want to ensure the dropdown menu is visible on the screen when the button is at the edge of the screen.