Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch in Item
Switch toggle in Item component layout with ItemTitle ItemDescription for structured settings built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Cards feel heavy, plain divs feel unstructured—Item component is the Goldilocks solution. This React pattern combines shadcn/ui's Item component (with ItemContent, ItemTitle, ItemDescription) and Switch toggle in variant outline bordered layout. Built with semantic Item subcomponents for consistent styling, the structured layout provides visual organization without card weight—perfect for settings interfaces, feature toggles in sidebars, preference lists, plugin management, or any interface where switches need professional structure following design system patterns rather than custom flex layouts.
Automatically save your work as you type
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Settings Card
Switch in custom card layout
Feature Card
Card with Lucide icon background
Settings List
Multiple switches with dividers
Standard Item
Basic Item component usage
Checkbox in Item
Checkbox with Item component
Radio in Item
Radio button in Item layout
Questions you might have
React Switch - Settings List
Multiple switches in divided list layout with labels descriptions for settings pages built with shadcn/ui and Tailwind divide-y
React Switch - Theme Toggle with Icons
A React switch toggle with sun and moon icons on either side for theme switching between light and dark modes