Shadcn.io is not affiliated with official shadcn/ui
Settings List
Multiple switches in divided list layout with labels descriptions for settings pages built with shadcn/ui and Tailwind divide-y
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.
Settings List preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.