Tailwind CSS Theme Toggle Components

Dev Design Library indexes 39 Tailwind CSS theme toggle components from 22 open-source UI libraries, with the most coming from Origin UI, GreatUI, Rewamp UI, SpaceUI and Amicro Micro Transitions. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. 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.
• 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.
• Mode ToggleLaunch UI · React
• 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
• 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 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
• Circular Theme ProviderGreatUI · React
• Day Night Sky ToggleRewamp UI · React
• 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
• Split Theme ProviderGreatUI · React
• Landscape Orb ToggleRewamp UI · React
• Theme SwitcherSpaceUI · React
• Comp 181Origin UI · React
• Swipe Theme ProviderGreatUI · React
• Comp 182Origin UI · React
• Comp 183Origin UI · React
• Comp 184Origin UI · React
• Comp 380Origin UI · React

Libraries with Tailwind CSS theme toggle components

• Origin UI
• GreatUI
• Rewamp UI
• SpaceUI
• Amicro Micro Transitions

Related categories

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