Notification preferencesPro

• Event × channel matrix
• Column select-all
• Quiet hours
• Unsaved-changes bar

• Notification settings in any product that emails, pushes or posts to chat.

• One or two toggles: use switches.

Import it from @/components/blocks/notification-preferences after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { NotificationPreferences } from "@/components/blocks/notification-preferences";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <NotificationPreferences />
    </main>
  );
}

• A table with row and column headers; every checkbox is labelled "<event> by <channel>".
• Column checkboxes show a mixed state.

• Quiet hours expand by height; the save bar slides up when something changes.

• The matrix scrolls horizontally under 448px.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Security emails are locked on by design; keep at least one required channel for them.