Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

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.

Lead with news. This React and Next.js hero block features a prominent announcement pill banner above the main headline, built with shadcn/ui Button components and styled with Tailwind CSS rounded-full and border utilities. The TypeScript component uses Framer Motion for smooth entrance animations and Lucide React icons (Sparkles, ArrowRight, Megaphone) for visual cues. A secondary news section with linked updates sits below the CTA buttons. Perfect for SaaS product launches, version announcements, or any Next.js landing page where timely news needs to make an impact.

React Announcement Hero Block preview

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 28, 2026

Was this page helpful?

Sign in to leave feedback.