Components
Loading preview...
An animated promotional banner component with floating gear icons and hover effects. Inspired by Vercel's upgrade prompts. Features - Smooth entrance animation - Interactive floating gear icons on hover - Dark mode support - Customizable button text and description - Optional close button - Responsive design - Accessible button interactions Perfect for: - Premium feature promotions - Upgrade notifications - Subscription upsells - Feature announcements Props - `buttonText` - Primary call-to-action text (default: "Upgrade to Pro") - `description` - Secondary descriptive text - `onClose` - Optional callback for close button - `onClick` - Callback for main button click - `className` - Additional CSS classes
@victorwelander
npx shadcn@latest add https://21st.dev/r/victorwelander/upgrade-bannerimport * as React from "react";
import { UpgradeBanner } from "@/components/ui/upgrade-banner";
function UpgradeBannerDemo() {
const [isVisible, setIsVisible] = React.useState(true);
if (!isVisible) {
return (
<button
onClick={() => setIsVisible(true)}
className="px-4 py-2 bg-blue-500 text-white rounded-md"
>
Show Banner
</button>
);
}
return (
<div className="w-full max-w-2xl mx-auto p-4">
<UpgradeBanner
buttonText="Upgrade to Pro"
description="for 2x more CPUs and faster builds"
onClose={() => setIsVisible(false)}
onClick={() => console.log("Upgrade clicked")}
/>
</div>
);
}
export { UpgradeBannerDemo };