Banner 6 - Black bar with arrow linkPro

Inverted full-width black bar with centered copy and an underlined link that nudges its arrow on hover.

About Banner 6

Inverted full-width black bar with centered copy and an underlined link that nudges its arrow on hover.

Banner 6 is a banner block for React and Tailwind CSS, included in Chocolate UI Pro. It ships as 62 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • black
  • inverted
  • link
  • arrow
  • centered

Installation

  1. Set up your project with npx chocolateui init and npx chocolateui login (see the installation guide).
  2. Run the Chocolate UI CLI:
npx chocolateui add banner-06

Dependencies installed automatically: lucide-react.

Uses: utils.

Usage

import Banner06 from "@/components/blocks/banner-06"

export default function Page() {
  return <Banner06 />
}

FAQ