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
Installation
Related Components
React Announcement Bar Hero Block
React hero with dismissible top bar using Framer Motion AnimatePresence
React Launch Badges Hero Block
React hero with product launch badges styled with Tailwind CSS
React Newsletter Hero Block
React hero with newsletter signup form using shadcn/ui Input components
React Countdown Hero Block
React hero with countdown timer for product launches in Next.js
React Email Signup Hero Block
React hero with email capture input built with shadcn/ui form components
React Changelog Preview Hero Block
React hero with inline changelog preview and shadcn/ui layout
FAQ
Was this page helpful?
Sign in to leave feedback.
React Animated Gradient Hero Block
A React and Next.js hero section with animated CSS gradient background, glassmorphism card, and floating shapes built with shadcn/ui Badge and Button, Tailwind CSS, and Framer Motion.
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.