A stunning and interactive announcement banner featuring smooth animations and customizable content.
Features: • Fluid entrance animations • Customizable content and styling options • Mobile-responsive design for optimal viewing on all devices • Support for icons and links • Accessible design with ARIA attributes • TypeScript support for enhanced development experience • Server-Side Rendering (SSR) compatibility
Notes: • Powered by Framer Motion for seamless animations • Fully typed using TypeScript for improved code quality and maintainability • Implemented as a Server Component with client-side hydration for optimal performance • Designed with a mobile-first approach to ensure responsiveness across devices • Customizable through props for easy integration and reusability • Optimized bundle size for efficient loading and performance • Reusable across various contexts and projects
'use client'
import { HeroPill } from "@/components/ui/hero-pill"
export function HeroPillFirst() {
return (
<HeroPill
href="https://badget.tech/blog/introducing-Badget-ai"
label="Introducing Badget.ai"
announcement="📣 Announcement"
isExternal
className="bg-[hsl(187,80.8%,34.7%)]/20 ring-[hsl(210,40%,96.1%)] [&_div]:bg-[hsl(210,40%,96.1%)] [&_div]:text-[hsl(187,80.8%,34.7%)] [&_p]:text-[hsl(187,80.8%,34.7%)] [&_svg_path]:fill-[hsl(187,80.8%,34.7%)]"
/>
)
}
export function HeroPillSecond() {
return (
<HeroPill
href="https://supavec-ship-letter.beehiiv.com/p/supavec-s-first-update-tysm-for-joining"
label="PDF files are now supported"
announcement="🛠️ New"
isExternal
/>
)
}Part of Prism UI — browse the full library on 21st.dev.