Switch Components

Dev Design Library indexes 200 switch components from 72 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. Switch components belong to the Inputs group.

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

• Switchshadcn/ui · React
• SwitchMUI / Material UI · React
• Squish SwitchReact Bits · ReactDrag-scrubbable switch whose thumb stretches by how fast it moves, flips at the midpoint and squashes against the…
• ToggledaisyUI · CSS (Tailwind)
• SwitchChakra UI · ReactUsed to capture a binary state
• SwitchHeroUI · ReactA toggle control that allows users to switch between on and off states.
• SwitchHeadless UI · React
• 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.
• SwitchRadix Themes · React
• Theme SwitchPreline UI · JavaScript (HTML + Tailwind)
• Halo SwitchCult UI · ReactToggle switch with spring thumb, frosted track, and extended touch hit area
• SwitchArk UI · ReactA control element that allows for a binary selection.
• Toggletransitions.dev · HTML/CSS
• SwitchTremor · React
• Basic switch.ReUI · ReactBasic switch.
• SwitchPark UI · ReactA form input component for toggling between on and off states.
• SwitchLobe UI · React
• 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
• Around Theme ToggleTheme Toggles · ReactAn animated sun-and-moon theme toggle with a sweeping transition.
• SwitchPanel UI · React Native
• Label 05 - With SwitchShadcn Space · ReactLabel component with switch
• Free Premium TogglePixel Perfect · ReactFree Premium Toggle component.
• Dimple SwitchOpenSourceUI · React
• Switch SpringKinetics · HTML/CSSKnob overshoots its track position on toggle
• SwitchBoardUI · ReactOn/off toggle with spring motion.
• SwitchTremor Blocks · React
• SwitchShadcn Dashboard · React
• Pricing Fourcnblocks · SvelteFour-tier pricing with toggle switch
• Liquid SwitchSwiftPieces · SwiftUIA toggle whose red fill pours across a glass track as the thumb crosses, swelling under the finger, with a drag that…
• 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
• SwitchArc Library · ReactA tactile toggle for settings that take effect immediately.
• 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.
• SwitchROI UI · ReactA toggle switch component.
• Notification settingsFLX UI · ReactHorizontal field rows each toggled with a switch.
• Spring ToggleHalaska UI · React
• With Checkbox Items As Switchessv-particles · Svelte
• Lamp SwitchPin UI · React
• 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.
• Aria SwitchReScript shadcn · ReScript
• Base SwitchSora UI · ReactAn accessible, highly customizable switch built on Base UI with Motion spring layout physics.
• Theme ToggleCue Foundations · React
• SwitchOUI · ReactReact aria components Switch with shadcn characteristics.
• Liquid SwitchLiquefy UI · ReactToggle switch in liquid glass style. Interruptor em estilo vidro líquido.
• 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
• Base Ui SwitchLobe UI · React
• 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
• Classic Theme ToggleTheme Toggles · ReactAn animated classic sun-and-moon theme toggle.
• 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
• Reaction ToggleSwiftPieces · SwiftUIA like or save toggle in liquid glass that floods with its tint, springs its symbol, rolls the count and buds a…
• Toggles 02Oxbow UI · Astro
• Switch 1Watermelon UI · React
• Switchglasscn · React
• Settings rowFLX UI · ReactTitle and description with a trailing Switch.
• Switch ToggleHalaska UI · React
• 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.
• Base SwitchReScript shadcn · ReScript
• 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.
• Dark Inner Theme ToggleTheme Toggles · ReactAn animated theme toggle with an inward rotating icon.
• 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.
• ToggleHalaska UI · React
• 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.
• Dark Side Theme ToggleTheme Toggles · ReactAn animated theme toggle with a side-rotating icon.

Libraries with switch components

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

Related categories

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