Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Switch - Settings Card
Switch in card layout with emoji icon gradient background label description for settings toggle built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Plain switch and label feels too bare—add visual context with cards. This React settings card combines emoji icon in gradient background, Label for Notifications, Switch toggle, and description text. Built with shadcn/ui Switch and Label in bordered card with flex layout, the card format groups related toggle with explanatory content—perfect for settings panels, preference screens, feature toggles, notification controls, or any interface where switches need visual context and descriptions making isolated toggles feel more intentional and discoverable.
A short description goes here.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Feature Card
Card with Lucide icon instead of emoji
Settings List
Multiple switches in divided list
Switch in Item
Switch in Item component layout
Standard Switch
Basic switch without card
Standard Card
Basic card component
Checkbox Card
Checkbox in card layout