Sections
Get Started
UI
Components
- Animated Beam
- Animated List
- Animated Logo
- Animated Theme Toggler
- Avatar Circles
- Bento Grid
- Big Name Text
- Border Beam
- Dock
- Feature Card
- Filter Dropdown
- Footer Link
- Hero Badge
- Hero Buttons
- Hyper Text
- Lens
- Magic Card
- Marquee
- Meteors
- Onboarding Form
- Pricing Card
- Scroll Text
- Section Header
- Site Header
- Status Card
- Status
- Tweet Card
Introducing the future
Default Badge
Amber Badge
"use client";
import { Sparkles } from "lucide-react";
import { HeroBadge } from "@/registry/sase/hero-badge";
export function HeroBadgeDemo() {
return (
<div className="flex flex-wrap items-center gap-4">
<HeroBadge icon={Sparkles} variant="violet">
Introducing the future
</HeroBadge>
<HeroBadge variant="default">Default Badge</HeroBadge>
<HeroBadge variant="amber">Amber Badge</HeroBadge>
</div>
);
}
Installation
pnpm dlx shadcn@latest add https://sase-ui.vercel.app/r/hero-badge.json
Usage
import { HeroBadge } from "@/components/ui/hero-badge";
import { Sparkles } from "lucide-react";<HeroBadge icon={Sparkles} variant="violet">
Introducing the future of productivity
</HeroBadge>Variants
The badge supports three variants: default, violet, and amber.
<HeroBadge variant="default">Default Badge</HeroBadge>
<HeroBadge variant="violet">Violet Badge</HeroBadge>
<HeroBadge variant="amber">Amber Badge</HeroBadge>