Components
Hero Badge
A versatile, animated badge component for highlighting new features, announcements, or important links.
Features: • Smooth entrance animations • Icon rotation on hover • Multiple size variants • Multiple style variants • Link and button functionality • Customizable icons • Responsive design • Accessibility features Notes: • Built with Framer Motion for smooth animations • Uses React Server Components (RSC) with the "use client" directive • Employs a responsive design with a mobile-first approach • Includes interactive hover animations • Supports TypeScript with proper types • Allows for custom styling and theming • Optimized performance through proper usage of hooks
import HeroBadge from "@/components/ui/hero-badge"
import { Icons } from "@/components/ui/icons"
function HeroBadgeBasic() {
return (
<div className="flex min-h-[350px] w-full items-center justify-center">
<HeroBadge
href="/docs"
text="New! PrismUI Components"
icon={<Icons.logo className="h-4 w-4" />}
endIcon={<Icons.chevronRight className="h-4 w-4" />}
/>
</div>
)
}
export { HeroBadgeBasic };Dependencies
Source
Published
Similar components
Explore more
Part of Prism UI — browse the full library on 21st.dev.