Banner Alert Icon Left

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/banner1.tsx instead.

Usage

The file also exports banner1Demo, 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 { Banner1, banner1Demo } from "@/components/blocks/banner/banner1";

export default function Page() {
  return <Banner1 {...banner1Demo} />;
}

Props

Behavior notes

• The icon renders flat at size-4 with no circular container, deliberately distinct from the stacked-card archetype's size-10 rounded icon container.
• accent only adds a colored left border; the icon and text stay monochrome (text-muted-foreground / text-foreground) regardless of accent so the strip never reads as a saturated dashboard alert.
• The action is always an inline arrow link, never a button, since a visually weighted CTA would push this archetype toward a dashboard card.

Frequently asked questions