Banner

A full-width message that runs along the top of a page or section.

New workspace features are live. See what's new

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/banner.json

Usage

Import from the master file. Pass a `variant` (or a `color` hex) and any content as children.

TSImport

import { Banner, type BannerVariant } from "@/components/ui/banner";

TSExample

import { Megaphone as MegaphoneIcon } from "@phosphor-icons/react/ssr";
import { Banner } from "@/components/ui/banner";

export function Example() {
  return (
    <Banner variant="brand" icon={<MegaphoneIcon weight="duotone" />} dismissible>
      New workspace features are live. <a href="#">See what's new</a>
    </Banner>
  );
}

Composition

Anatomy of the Banner primitive.

Banner                            (single component — pass everything as props)
├── variant="default | brand | info | success | warning | destructive"
├── color="#rrggbb"               (custom hex — overrides variant, soft-tinted)
├── icon={<LucideIcon />}          (leading icon, optional)
├── children={<ReactNode>}         (any content — the message)
├── action={<ReactNode>}           (trailing element, e.g. a link/button)
├── solid={boolean}                (solid full-color fill instead of soft tint)
├── centered={boolean}             (center the content horizontally)
├── dismissible={boolean}          (show an X — omit for a non-removable banner)
├── onDismiss={() => void}         (fires when dismissed)
├── sticky={boolean}               (stick to the top of the scroll container)
└── position="floating | top"      (floating = inline · top = fixed full-width top bar)

Brand

Announcement banner using the brand primary tint, dismissible.

New workspace features are live. See what's new

Info

Neutral, informational context. No dismiss.

Scheduled maintenance this Sunday from 2–4am ET.

Warning + action

Caution tone with a trailing action link and a dismiss button.

Your plan expires in 3 days.

Renew

Destructive

Communicates an outage or error, dismissible.

We're experiencing a partial outage. Some features may be unavailable.

Custom color

Pass any hex to `color` — the banner soft-tints the background and border from it.

Custom brand color via the color hex prop.

Centered + non-removable

Set `centered` to center the content; omit `dismissible` so there's no dismiss control.

Centered, non-removable announcement.

Solid fill

Set `solid` for a full-color background with contrasting text (works with `color` too).

Solid fill via the solid prop.

System banner (position="top")

Pinned edge-to-edge across the very top of the page with centered content. Shown here inside a mock frame so it stays contained.

Canopy is live — the fastest way to ship. Explore →

System banner spans the entire top edge.

API Reference

Props exposed by the Banner component.

Prop	Type	Default	Description
`variant`	"default" \| "brand" \| "info" \| "success" \| "warning" \| "destructive"	"default"	Named color treatment. Drives border, background, text, and dark-mode classes. Ignored when `color` is set.
`color`	string	—	Custom hex color (e.g. `#7c3aed`). Overrides `variant` — the banner derives a soft tinted background + border from it via color-mix.
`icon`	ReactNode	—	Leading icon (typically a Phosphor icon).
`children`	ReactNode	—	The banner content. Accepts strings or arbitrary JSX.
`action`	ReactNode	—	Trailing element (link/button) rendered before the dismiss control.
`solid`	boolean	false	Use a solid full-color fill with contrasting text instead of the soft tint. Works with named variants and with a custom `color` hex.
`centered`	boolean	false	Center the content horizontally. Always on when `position="top"`.
`dismissible`	boolean	false	Show a dismiss button that hides the banner (uncontrolled). Omit for a non-removable banner (the default — no dismiss control renders).
`onDismiss`	() => void	—	Callback fired when the banner is dismissed.
`sticky`	boolean	false	Stick the banner to the top of its scroll container (`sticky top-0 z-30`). Ignored when `position="top"`.
`position`	"floating" \| "top"	"floating"	Layout. `floating` flows inline in its container (full rounded outline). `top` pins the banner edge-to-edge across the very top of the page (`fixed inset-x-0 top-0`) with centered content — a system banner.
`className`	string	—	Override or extend the resolved variant classes.