Shadcn.io is not affiliated with official shadcn/ui
React Announcement Bar Hero Block
A React and Next.js hero section with dismissible announcement banner, centered headline, and dual CTA buttons built with shadcn/ui Button, Tailwind CSS, and Framer Motion AnimatePresence.
Lead with news. This React and Next.js hero block opens with a dismissible announcement bar powered by Framer Motion AnimatePresence, followed by a centered headline section with dual shadcn/ui Button CTAs styled with Tailwind CSS. The TypeScript component manages dismiss state with React useState, and the bar collapses with a smooth height and opacity animation. The announcement bar features a linked badge, external link icon from Lucide React, and an accessible close button. Perfect for product launches, conference announcements, limited-time offers, or any Next.js landing page with timely news.
React Announcement Bar Hero Block preview
Installation
Related Components
React Announcement Hero Block
React hero with prominent announcement banner and shadcn/ui Badge
React Launch Badges Hero Block
React hero with product launch badges styled with Tailwind CSS
React Product Hunt Hero Block
React hero with Product Hunt badge and shadcn/ui components
React Changelog Hero Block
React hero with changelog entries and version history display
React Changelog Preview Hero Block
React hero with inline changelog preview for Next.js landing pages
React Countdown Hero Block
React hero with countdown timer built with Tailwind CSS animations
FAQ
Was this page helpful?
Sign in to leave feedback.
React Announcement Hero Block
A React and Next.js hero section with prominent announcement pill banner, news highlights, and dual CTAs built with shadcn/ui Button components, Tailwind CSS, and Framer Motion entrance animations.
React API Playground Hero Block
A React and Next.js hero section with interactive API playground featuring request/response panels, built with shadcn/ui Badge and Button components and Tailwind CSS