Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch - Square Theme Toggle
Square switch toggle with moon and sun icons for dark/light theme switching with compact minimal design built with shadcn/ui and Lucide icons
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Theme toggles need instant recognition—moon and sun are universal. This React square switch combines shadcn/ui Switch with Lucide React's MoonIcon and SunIcon flanking sides, controlled state, and compact squared styling with gap-2 spacing. Built with Radix UI primitives and size-4 icons, the icon-based theme toggle provides visual affordance without text—perfect for navigation bars, headers, settings panels, app toolbars, or any interface where theme switching needs compact recognizable controls that communicate dark/light modes through culturally universal sun/moon metaphors requiring no translation or explanation.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Square Switch
Basic square switch without icons
Square Switch with Text
Square toggle with ON/OFF labels
Square Switch with Label
Square switch with external label
Icon Button
Button with icon only
Standard Switch
Default rounded switch
Dropdown Menu
Menu for theme selection
Questions you might have
React Square Switch with Label
Square switch toggle with external Label component for accessible labeled controls with minimal geometric aesthetic built with shadcn/ui
React Default Switch
Default switch toggle control with rounded pill shape standard styling unchecked state built with shadcn/ui and Radix UI