Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch - Settings List
Multiple switches in divided list layout with labels descriptions for settings pages built with shadcn/ui and Tailwind divide-y
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Single settings feel lonely—users have many preferences to configure. This React settings list stacks multiple switches with divide-y borders, each with Label, description text, and Switch toggle. Built with shadcn/ui Switch and Label in bordered container with Tailwind's divide utilities, the list format groups related settings in compact vertical layout—perfect for preferences panels, notification controls, privacy settings, account options, or any interface where multiple toggles need organized presentation without the visual weight of individual cards.
Receive emails about new products
Receive emails about account security
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Settings Card
Single switch in card with icon
Feature Card
Switch card with Lucide icon
Switch in Item
Switch in Item component layout
Form Sections
Divided form sections layout
Divided List
List items with dividers
Checkbox List
Multiple checkboxes in list