Grouped Categories with Switches

Settings Notifications 3Pro

A notification settings section with notifications organized into labeled categories, each in a bordered card with switch toggles.

Shadcn UI Settings Notifications Block

SettingsNotifications3 is a notification settings section with notifications organized into distinct categories. Each category has an uppercase label followed by a bordered card containing related notification options. The default data includes Activity, Updates, and Account categories.

Each notification row displays a title, description, and switch toggle. The rows are stacked vertically within their category card with divider lines between them. Category labels use small uppercase text with wide letter spacing to create visual hierarchy.

The visual style is organized and structured with clear groupings. Bordered cards with rounded corners contain each category’s options, creating visual separation between groups. The uppercase category labels provide a subtle hierarchy without being heavy.

This block works well for applications with multiple notification types that benefit from logical grouping. The categorized layout helps users find specific settings without scrolling through a long undifferentiated list.

Dependencies

PackageType
lucide-reactNPM
switch
@shadcn
Registry