Notification Preferences

Onboarding18: Notification Preferences

Onboarding screen that groups notification toggles under category headings inside a single card, using shadcn Switch controls seeded from each option's default state, with a live " notifications enabled" tally beneath.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/onboarding18?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/onboarding18?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/onboarding18.tsx and the badge, button, and switch shadcn/ui primitives it depends on.

Quick start

The installed file exports onboarding18Demo alongside the block: the exact props behind the preview above. Spread it to get a working notification preferences step in one line.

import { Onboarding18, onboarding18Demo } from "@/components/beste/block/onboarding18";

export default function OnboardingPage() {
  return <Onboarding18 {...onboarding18Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Onboarding18 } from "@/components/beste/block/onboarding18";

export default function OnboardingPage() {
  return (
    <Onboarding18
      badge={{ label: "Notifications", variant: "secondary" }}
      heading="Stay in the loop"
      description="Choose which notifications you'd like to receive."
      groups={[
        {
          title: "Activity",
          options: [
            { id: "mentions", title: "Mentions & replies", description: "When someone mentions you", defaultEnabled: true },
            { id: "comments", title: "New comments", description: "When someone comments on your work", defaultEnabled: false },
          ],
        },
        {
          title: "Updates",
          options: [
            { id: "product", title: "Product updates", description: "New features and changelog", defaultEnabled: true },
          ],
        },
      ]}
      primaryButton={{ label: "Save & Continue", href: "/onboarding/finish" }}
      secondaryButton={{ label: "Skip for now", href: "/dashboard" }}
    />
  );
}

Props

type NotificationOption = {
  id: string;
  title: string;
  description: string;
  defaultEnabled?: boolean;
};

type NotificationGroup = { title: string; options: NotificationOption[] };

Behavior notes

• Switch state is seeded once at mount by flattening every group's options and collecting the ids where defaultEnabled is true into a useState<Set<string>>; toggling a Switch only flips membership in that local set, there's no onChange/onSave callback prop, so nothing is persisted outside the component.
• Groups are separated by a manually rendered border-t divider placed between all but the last group, rather than a Separator component.
• The " notifications enabled" summary always reflects the live count across every group combined, not a per-group tally.
• primaryButton ("Save & Continue" in the demo) and secondaryButton are always-enabled plain links regardless of how many switches are on; nothing gates on or reports the switch state back to the caller.