# 7 React Toggle Switch Components for Tailwind

> Switches and toggles with physical feel: spring thumbs, day/night scenes, icon-morphing switches, light/dark/system selectors, settings lists and like/bookmark toggles.

3 of 7 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Toggle Day Night](https://pixelpapa.com/components/toggles/toggle-day-night.md) (Pro): A theme switch drawn as a tiny sky: the sun rolls across and becomes a cratered moon, clouds sink away and stars pop out one by one.
- [Toggle Icon Morph](https://pixelpapa.com/components/toggles/toggle-icon-morph.md): A switch with a glyph inside the thumb: the two strokes of the cross swing and re-join into a check as the thumb rolls across.
- [Toggle iOS With Label List](https://pixelpapa.com/components/toggles/toggle-ios-with-label-list.md) (Pro): A settings card of labelled switches under a master toggle; turning the master off folds the dependent rows away with a staggered collapse.
- [Toggle Like Bookmark](https://pixelpapa.com/components/toggles/toggle-like-bookmark.md): Icon toggles that each fill in their own way: the heart pops, the bookmark drops in from above, the star spins and the bell rings, all with a ring burst.
- [Toggle Lock Shake](https://pixelpapa.com/components/toggles/toggle-lock-shake.md) (Pro): A switch that can be locked: clicking it then shakes its head, rattles the padlock in the thumb and pops up the reason it cannot change.
- [Toggle Segmented Theme](https://pixelpapa.com/components/toggles/toggle-segmented-theme.md) (Pro): A light / dark / system picker with a sliding thumb and icons that react when chosen, paired with a miniature window that wipes between themes and splits in two for "system".
- [Toggle Spring Switch](https://pixelpapa.com/components/toggles/toggle-spring-switch.md): A switch whose thumb stretches toward the other side while pressed, then snaps across with a little overshoot on release.