Notification Channel Picker

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon11.tsx instead.

Usage

The file also exports comingsoon11Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon11, comingsoon11Demo } from "@/components/blocks/coming-soon/comingsoon11";

export default function Page() {
  return <ComingSoon11 {...comingsoon11Demo} />;
}

Props

Types

export interface NotificationChannel {
  id: string;
  label: string;
  description: string;
}

Behavior notes

• `"use client"`. Clicking a card is real interactivity: it toggles that channel's id in a `useState<Set<string>>`, updates the card's selected styling and `aria-pressed`, and the "N channels selected" badge below recomputes from that same state.
• Each card's icon is picked from a fixed, hardcoded array by array position (Mail/MessageSquare/AtSign/Smartphone), not passed in per-item as a prop, since a component reference can't cross the client-component boundary.
• No data is actually submitted anywhere; this only tracks in-memory selection for the demo.