Banner Full Bleed Border Accent

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

Usage

The file also exports banner29Demo, 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 { Banner29, banner29Demo } from "@/components/blocks/banner/banner29";

export default function Page() {
  return <Banner29 {...banner29Demo} />;
}

Props

Behavior notes

• The border is a static 2px border-primary/60 ring around the whole panel, with no keyframe animation, which keeps this variant deliberately calmer than the animated outline sibling.
• This is a plain server component; there's no client-side JavaScript involved since the border needs no interaction or motion.
• The title and description sit inside a max-w-lg column even though the panel itself is edge to edge, so the copy stays readable on wide viewports instead of stretching full width.
• The eyebrow and description use reduced opacity (60% and 70%) against the dark panel to build a typographic hierarchy without introducing extra colors.

Frequently asked questions