Banner Marquee Badges

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

Usage

The file also exports banner40Demo, 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 { Banner40, banner40Demo } from "@/components/blocks/banner/banner40";

export default function Page() {
  return <Banner40 {...banner40Demo} />;
}

Props

Types

type Badge = {
  label: string;
};

Behavior notes

• Distinct from the existing Marquee Trust Badges block, which scrolls flat icon+label pairs with no chip background. This variant wraps each badge as a bordered pill and adds a small Dot icon divider between entries, giving it a ticker-feed silhouette rather than a logo strip.
• Reuses the site's shared .animate-marquee keyframe, so it inherits the same loop duration, hover/focus pause, and prefers-reduced-motion fallback as every other marquee on the site instead of defining a new one.
• The badges array is rendered twice back to back so the CSS translateX(-50%) loop point lines up exactly with the end of the first copy; the second copy is aria-hidden so screen readers only announce the badges once.

Frequently asked questions