Banner Alert Toggle Setting

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its 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/banner/banner17.tsx instead.

Usage

The file also exports banner17Demo, 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 { Banner17, banner17Demo } from "@/components/blocks/banner/banner17";

export default function Page() {
  return <Banner17 {...banner17Demo} />;
}

Props

Behavior notes

• The switch is a plain button with role="switch" and aria-checked, not a native checkbox, so it can be styled as a sliding pill; this repo's UI kit doesn't ship a Switch primitive, so it's hand-built to match the existing button and input tokens.
• The On/Off label next to the switch is derived from the same state as the switch itself, so they can never fall out of sync.
• The icon is looked up internally rather than accepted as a prop, since this is a Client Component and a Lucide icon reference can't cross the Server-to-Client props boundary from a generated demo page.

Frequently asked questions