dashboard pattern

Settings — notifications

Email + in-app + push notification preferences.

When to use it

User adjusts what gets emailed / pushed / shown in-app.

  • Toggle in <2 taps per row
  • Granular categories visible
  • Quiet hours configuration

Layout regions

  • main

States

  • default
  • loading

Example

<Container><Card><CardHeader><CardTitle>Notifications</CardTitle></CardHeader><CardContent><List>{categories.map((c) => <NotificationRow key={c.id} {...c} />)}</List></CardContent></Card></Container>

The full Settings — notifications pattern specifies 2 exact microcopy strings, 1 motion spec, 3 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Settings — notifications pattern in your project.