Tailwind CSS Switch Components

Dev Design Library indexes 163 Tailwind CSS switch components from 53 open-source UI libraries, with the most coming from Watermelon UI, FLX UI, Origin UI, ReUI and Shadcn Space. 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. Switch components belong to the Inputs group.

Showing 120 of 163, a mix from every library. Open a library to see all of its components.

• Switchshadcn/ui · React
• ToggledaisyUI · CSS (Tailwind)
• SwitchHeroUI · ReactA toggle control that allows users to switch between on and off states.
• SwitchReact Spectrum · ReactSwitches allow users to turn an individual option on or off. They are usually used to activate or deactivate a…
• Switchcoss ui · ReactA control that indicates whether a setting is on or off.
• SwitchOrigin UI · ReactA control that indicates whether a setting is on or off.
• Theme SwitchPreline UI · JavaScript (HTML + Tailwind)
• Halo SwitchCult UI · ReactToggle switch with spring thumb, frosted track, and extended touch hit area
• SwitchTremor · React
• Basic switch.ReUI · ReactBasic switch.
• switchIntent UI · Reactswitch
• ToggleUntitled UI React · React
• SwitchbeUI · ReactToggle with a spring-driven thumb and press feedback.
• ToggleTailGrids · ReactA toggle switch component.
• Animated SwitchSpectrum UI · ReactAn iOS-quality animated toggle switch with a press-to-stretch knob, drag-to-toggle with flick support, and optional…
• SwitchVengeance UI · React
• SwitchFluid Functionalism · ReactAnimated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Built on Radix UI…
• SwitchToolcraft · React
• SwitchPanel UI · React Native
• Label 05 - With SwitchShadcn Space · ReactLabel component with switch
• Free Premium TogglePixel Perfect · ReactFree Premium Toggle component.
• Dimple SwitchOpenSourceUI · React
• SwitchBoardUI · ReactOn/off toggle with spring motion.
• SwitchTremor Blocks · React
• SwitchShadcn Dashboard · React
• Pricing Fourcnblocks · SvelteFour-tier pricing with toggle switch
• SwitchObsidianUI · React
• Toggles 01Oxbow UI · Astro
• SwitchNexvyn UI · ReactA toggle switch with thumb travel animation and hidden checkbox for forms.
• System Audio Settingsaudiocn · ReactTurn system audio capture on, set its level, watch its meter and explain what the browser will capture.
• switchBaseLayer · ReactA switch allows a user to turn a setting on or off.
• SwitchShark UI · ReactA switch for toggling a binary state.
• Glass Orb ToggleRewamp UI · React
• RealisticSwitchEvil Buttons · ReactA latching push switch, a raised box that sinks into its socket when pressed, stays down and glows while on, and…
• Animated SwitchSona UI · ReactAn interactive iOS-style squish switch built on Base UI Switch primitives, with interruptible press feedback and a…
• SwitchWatermelon UI · React
• Liquid Switchglasscn · ReactA liquid-glass switch wrapper built on top of the default switch component.
• Toggle SwitchUI Lab · ReactLeans into the move when pressed, then springs across and squashes on landing.
• SwitchHextaUI · ReactAn on/off toggle you can tap, press or drag, with a thumb that stretches under your finger and an optional pending…
• Differential Privacy ControlsLocalMode · ReactA collapsible DP settings panel (enable toggle, epsilon slider with derived High/Balanced/Low label, privacy-budget…
• SwitchCojeev UI · ReactTurns a named binary setting on or off.
• Notification settingsFLX UI · ReactHorizontal field rows each toggled with a switch.
• With Checkbox Items As Switchessv-particles · Svelte
• SwitchMetal UI · React + SwiftUIA setting that is on or off and takes effect at once: a sunk pill track with a raised thumb that slides on the part…
• Liquid SwitchSpaceUI · ReactToggle switch whose knob stretches like a liquid drop as it slides.
• Base SwitchSora UI · ReactAn accessible, highly customizable switch built on Base UI with Motion spring layout physics.
• SwitchOUI · ReactReact aria components Switch with shadcn characteristics.
• Notification BentoD2Studio UI · ReactA four-panel notification bento: a pure-CSS metallic bell on a lit dot-matrix field, recent activity feed, unread…
• SwitchEaseUI · ReactOn and off switch with a quick slide and no bounce. Inside a label, the whole row is the tap target.
• Glass Control CenterOpaline · ReactmacOS-style Control Center kit — glass modules, toggles, light-filled sliders and buttons.
• SwitchFibo · ReactTurns a setting on or off, taking effect at once.
• Toggle ProReactFrame · ReactAn accessible switch with a springy squish animation on the thumb, an optional label + helper text, and a focus ring.
• Switchark-cn · ReactA shadcn-style switch component built with Ark UI primitives.
• Switch GroupHeroUI · React
• Tailwind SwitchReact Spectrum · React
• Comp 172Origin UI · React
• Toggle CountPreline UI · JavaScript (HTML + Tailwind)
• ToggleTremor · React
• Switch with badgesReUI · ReactSwitch with badges
• toggleIntent UI · Reacttoggle
• Feature Flags TableSpectrum UI · ReactFlag management with env chips, rollout meters and a live spring-animated switch per row.
• Switch (Base UI)Fluid Functionalism · ReactAnimated toggle switch with spring-based thumb animation and fluid font-weight label transitions. Base UI flavor.
• Switch ControlToolcraft · React
• Web SwitchPanel UI · React Native
• Switch-03 - Toggle themeShadcn Space · ReactSwitch toggle theme component
• Slate Chip SwitchOpenSourceUI · React
• SettingsBoardUI · React
• ToggleShadcn Dashboard · React
• Pricing Twocnblocks · SvelteTwo-column pricing with monthly/yearly toggle
• Toggles 02Oxbow UI · Astro
• Switch 1Watermelon UI · React
• Switchglasscn · React
• Settings rowFLX UI · ReactTitle and description with a trailing Switch.
• ToggleMetal UI · React + SwiftUIA latching push button: the button cap with a lamp; pressing sinks it past the catch, releasing into on settles it at…
• SwitchSpaceUI · ReactPattern-matching conditional container supporting Case and Default branches.
• Radix SwitchSora UI · ReactAn accessible, highly customizable switch built on Radix UI with Motion spring layout physics.
• SwitchD2Studio UI · ReactA control that allows the user to toggle between checked and not checked.
• Glass SwitchOpaline · ReactiOS switch whose thumb turns into a glass lens while pressed.
• Vanilla SwitchReact Spectrum · React
• Comp 173Origin UI · React
• Toggle PasswordPreline UI · JavaScript (HTML + Tailwind)
• Colored switchesReUI · ReactColored switches
• No NotificationsSpectrum UI · ReactAn empty notification tray with working channel switches and a quiet-hours state.
• Switch-04 - With DescriptionShadcn Space · ReactSwitch component
• Switch Field InputOpenSourceUI · React
• ThemeBoardUI · React
• Toggles 03Oxbow UI · Astro
• Switch 10Watermelon UI · React
• IntegrationsFLX UI · ReactBrand icon, status badge in title, connect Switch.
• ToggleD2Studio UI · ReactA two-state button that can be either on or off.
• Comp 174Origin UI · React
• Destructive switch with confirmation textReUI · ReactDestructive switch with confirmation text
• Policy FooterSpectrum UI · ReactCookie-category switches with a save state, over a layered legal row.
• Switch-06 - Custom ColorsShadcn Space · ReactSwitch component
• Toggles 04Oxbow UI · Astro
• Switch 11Watermelon UI · React
• Channel MatrixFLX UI · ReactChannel Matrix for Notifications.
• Comp 175Origin UI · React
• Compact settings table with switchesReUI · ReactCompact settings table with switches
• Switch 07 - Labeled ToggleShadcn Space · ReactA reusable labeled switch with custom onLabel/offLabel props, a track that auto-sizes to the label text, and a…
• Toggles 05Oxbow UI · Astro
• Switch 12Watermelon UI · React
• Grouped TogglesFLX UI · ReactGrouped Toggles for Notifications.
• Comp 176Origin UI · React
• Switch with descriptions in card gridReUI · ReactSwitch with descriptions in card grid
• Switch 10 - Async SaveShadcn Space · ReactTwo-factor authentication switch that saves to the server with a saving state, a saved confirmation, and a revert with…
• Toggles 06Oxbow UI · Astro
• Switch 13Watermelon UI · React
• Digest FrequencyFLX UI · ReactDigest Frequency for Notifications.
• Comp 177Origin UI · React
• Switch with description.ReUI · ReactSwitch with description.
• Switch 11 - Parent & Child SwitchesShadcn Space · ReactMaster switch that enables or disables a group of nested switches, with a live enabled count and automatic off when…
• Switch 14Watermelon UI · React
• BasicFLX UI · ReactA single standalone switch.
• Comp 178Origin UI · React
• Disabled switch.ReUI · ReactDisabled switch.
• Switch 12 - Notification MatrixShadcn Space · ReactNotification preferences table with email, push, and SMS switches per event type and a column switch to toggle a whole…
• Switch 15Watermelon UI · React
• With labelFLX UI · ReactSwitch paired with an accessible field label.
• Comp 179Origin UI · React

Libraries with Tailwind CSS switch components

• Watermelon UI
• FLX UI
• Origin UI
• ReUI
• Shadcn Space

Related categories

• Switch Components
• React Switch Components
• Animated Switch Components
• shadcn/ui Switch Components
• Tailwind CSS Input Components
• Tailwind CSS Text Input Components
• Tailwind CSS Select Components
• Tailwind CSS Form Field Components
• Tailwind CSS Form Components
• Tailwind CSS Textarea Components
• Tailwind CSS Checkbox Components
• Tailwind CSS Slider Components
• Tailwind CSS Radio Components
• Tailwind CSS Combobox Components
• Tailwind CSS File Upload Components
• Tailwind CSS Search Input Components
• Tailwind CSS Date Picker Components
• Tailwind CSS Login Form Components
• Tailwind CSS Color Picker Components
• Tailwind CSS OTP Input Components