Banner Ribbon Corner

Installation

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

Usage

The file also exports banner8Demo, 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 { Banner8, banner8Demo } from "@/components/blocks/banner/banner8";

export default function Page() {
  return <Banner8 {...banner8Demo} />;
}

Props

Behavior notes

• The ribbon uses a pure CSS -rotate-45 transform with absolute positioning; the card's overflow-hidden clips the strip's ends flush against the card edges, which is why the strip itself is rendered wider than the card.
• The action is a real outline Button (not an inline link), unlike most other banner archetypes, since a ribbon-badged announcement is meant to read as a small standalone card rather than a strip of chrome.
• There is no dismiss control by design, a ribbon badge is meant to persist as long as the underlying announcement (beta, early access, new) is true.

Frequently asked questions