Components
Loading preview...
A pill-shaped component for highlighting key features or messages with optional icons and animations. Features - Optional leading icon - Smooth entrance animation - Dark mode support - Customizable styles and animations - Hover effects
npx shadcn@latest add https://21st.dev/r/originui/hero-pillimport { HeroPill, StarIcon } from "@/components/ui/hero-pill"
function HeroPillDemo() {
return (
<div className="space-y-4">
<HeroPill
icon={<StarIcon />}
text="New releases every week"
/>
<HeroPill
icon={
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
className="fill-zinc-500"
>
<path d="M12 2L1 21h22L12 2z" />
</svg>
}
text="Custom Icon Pill"
/>
</div>
)
}
export { HeroPillDemo }