Components
Loading preview...
Banner alert inspired by shadcn/ui format
npx shadcn@latest add https://21st.dev/r/serafimcloud/bannerimport { Banner } from "@/components/ui/banner"
import { Eclipse } from "lucide-react"
function BannerUpgrade() {
return (
<Banner variant="muted" className="dark text-foreground">
<div className="w-full">
<p className="flex items-center justify-center text-sm">
<Eclipse
className="-mt-0.5 me-3 inline-flex opacity-60"
size={16}
strokeWidth={2}
aria-hidden="true"
/>
Get the most out of your app with real-time updates and analytics{" "}
<span className="text-muted-foreground">·</span>{" "}
<a href="#" className="font-medium underline hover:no-underline">
Upgrade
</a>
</p>
</div>
</Banner>
)
}
export { BannerUpgrade }