# Mode Toggle > Section: Atoms A theme toggle button for dark and light mode. Source: https://design.formance.com/docs/components/mode-toggle **Example — `mode-toggle`:** ```tsx 'use client'; import { useState } from 'react'; import { ModeToggle, type TTheme } from '@/registry/default/ui/mode-toggle'; export default function ModeToggleDemo() { const [theme, setTheme] = useState('light'); return ; } ``` ## Installation CLI Manual ```bash npx shadcn@latest add @formance/mode-toggle ``` Install the following dependencies: ```bash npm install lucide-react ``` Copy and paste the following code into your project. **Source — `mode-toggle.tsx`:** ```tsx import { Moon, Sun } from 'lucide-react'; import { Button } from '@/registry/default/ui/button'; export type TTheme = 'dark' | 'light' | 'system'; export function ModeToggle({ theme, setTheme, }: { theme: TTheme; setTheme: (theme: TTheme) => void; }) { return ( ); } ``` Update the import paths to match your project setup. ## Usage ```tsx import { ModeToggle } from '@/components/ui/mode-toggle' ``` ```tsx ```

Command Menu

Mode Toggle

Installation#

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#