Theme Toggle Components

Dev Design Library indexes 60 theme toggle components from 27 open-source UI libraries, with the most coming from Theme Toggles, Origin UI, GreatUI, Arc Library and Rewamp UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Theme toggle components belong to the Actions group.

• Theme TogglerMagic UI · ReactTheme toggle with View Transitions and animated clip-path masks (circle, polygons, star), optional viewport-centered…
• Comp 130Origin UI · React
• Theme SwitchPreline UI · JavaScript (HTML + Tailwind)
• Gradient Button GroupCult UI · ReactPremium layered button group with animated active state, gradient ring accents, and theme toggle underlay
• Theme toggle button with animated moon and sun iconsReUI · ReactTheme toggle button with animated moon and sun icons
• Light Dark MorphAmicro Micro Transitions · ReactTheme toggle whose sun icon changes shape into a moon. Alternador de tema cujo ícone de sol se transforma em lua.
• Theme SwitchLobe UI · ReactThemeSwitch component is a dropdown menu that allows users to switch between different theme modes.
• Switch ButtonKokonut UI · ReactLight and dark theme toggle whose sun folds into a moon while the new theme spreads from the button as a circle.
• Theme TogglebeUI · ReactTheme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path…
• Theme SelectorRare UI · ReactA row of miniature app previews, one per theme, with a ring that marks the one you pick.
• Theme SwitcherUser Interface Wiki · React
• Mode ToggleLaunch UI · React
• Around Theme ToggleTheme Toggles · ReactAn animated sun-and-moon theme toggle with a sweeping transition.
• Theme Toggleuselayouts · ReactA physical switch with a dotted grip. Click and the knob slides across a recessed track.
• ThemeBoardUI · React
• Animated Theme TogglerAnimations (Svelte) · SvelteA smooth animated theme toggler that uses the View Transition API to create a circular reveal effect when switching…
• Blur Fade Theme TransitionGreatUI · ReactLight and dark theme toggle that switches the page with a blur and fade transition.
• Theme ToggleRewamp UI · ReactRewampUI ThemeToggle Component A smooth, tactile Light / Dark mode toggle switch with layout-interpolated spring…
• Theme TogglerWatermelon UI · React
• Theme switcherArc Library · ReactFour smooth ways to move between light and dark appearance.
• Pull Cord SwitchUI Lab · ReactPull the ball chain to switch the site's lights; light pours from the bulb as a cone.
• AppearanceCojeev UI · ReactChoose from six coordinated palettes and adjust reading contrast across the application.
• Theme switcherFLX UI · ReactRadio group toggling light, dark, and system themes.
• Theme TogglerVelora UI · ReactWipes the new theme in as a circle using View Transitions.
• Theme ToggleSpaceUI · ReactView Transition API theme switch with circle, blur, rectangle, and polygon reveals.
• Theme ToggleCue Foundations · React
• Theme ToggleEaseUI · ReactLight and dark switch that reveals the new theme as a circle growing from the center of the screen or from the button…
• Comp 150Origin UI · React
• Button ThemeAmicro Micro Transitions · React
• Classic Theme ToggleTheme Toggles · ReactAn animated classic sun-and-moon theme toggle.
• Circular Theme ProviderGreatUI · React
• Day Night Sky ToggleRewamp UI · React
• EclipseArc Library · ReactThe next appearance crosses the page like an eclipse.
• Theme ToggleUI Lab · ReactA sun that folds its rays away and turns into a crescent moon.
• Theme toggleCojeev UI · ReactA controlled light/dark switch with a morphing sun and moon and a smooth organic page reveal.
• Mode SwitcherSpaceUI · React
• Comp 169Origin UI · React
• Dark Inner Theme ToggleTheme Toggles · ReactAn animated theme toggle with an inward rotating icon.
• Split Theme ProviderGreatUI · React
• Landscape Orb ToggleRewamp UI · React
• RiseArc Library · ReactThe next appearance rises into place.
• Theme SwitcherSpaceUI · React
• Comp 181Origin UI · React
• Dark Side Theme ToggleTheme Toggles · ReactAn animated theme toggle with a side-rotating icon.
• Swipe Theme ProviderGreatUI · React
• SplitArc Library · ReactThe next appearance opens from a slim center seam.
• Comp 182Origin UI · React
• Eclipse Theme ToggleTheme Toggles · ReactAn animated theme toggle with an eclipse transition.
• Comp 183Origin UI · React
• Expand Theme ToggleTheme Toggles · ReactAn animated theme toggle with an expanding sun-and-moon transition.
• Comp 184Origin UI · React
• Half Sun Theme ToggleTheme Toggles · ReactAn animated theme toggle with a half-sun rotation.
• Comp 380Origin UI · React
• Horizon Theme ToggleTheme Toggles · ReactAn animated theme toggle with a horizon-inspired reveal.
• Inner Moon Theme ToggleTheme Toggles · ReactAn animated theme toggle with an inner-moon rotation.
• Light Switch Theme ToggleTheme Toggles · ReactAn animated theme toggle inspired by a wall switch.
• Lightbulb Theme ToggleTheme Toggles · ReactAn animated theme toggle inspired by a lightbulb.
• Simple Theme ToggleTheme Toggles · ReactA compact animated sun-and-moon theme toggle.
• Spin Theme ToggleTheme Toggles · ReactAn animated theme toggle with a spinning sun-and-moon transition.
• Within Theme ToggleTheme Toggles · ReactAn animated theme toggle with a nested sun-and-moon transition.

Libraries with theme toggle components

• Theme Toggles
• Origin UI
• GreatUI
• Arc Library
• Rewamp UI

Related categories

• React Theme Toggle Components
• Tailwind CSS Theme Toggle Components
• Animated Theme Toggle Components
• Action Components
• Button Components
• Button Group Components
• Toggle Button Components
• Icon Button Components
• Link Components
• CTA Button Components
• Copy Button Components
• Like Button Components
• FAB Components
• Social Login Button Components
• Hold Button Components
• Share Button Components
• Slide To Confirm Components
• Download Button Components
• Submit Button Components