Badge Squircle
Tactile squircle badge components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.
2.8 KB
•Updated on September 20, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-badge-squircleAnatomy
Code
import { Badge } from '@/components/spaceui/badge-squircle'
export default function Example() {
return (
<Badge variant="default">
<span>Badge label</span>
</Badge>
)
}Features
Sizes
Icons & Polymorphic Links
Props
BadgeSquircle
| Prop | Type | Default | Description |
|---|---|---|---|
variant | default|primary|secondary|outline|destructive|inverted|accent | default | Visual styling variant |
size | xs|sm|default|md|lg | default | Dimensions and font scaling scale |
squircle | boolean | true | Enables continuous curvature corner squircle mask |
circle | boolean | false | Aspect ratio square modifier |
render | React.ReactElement|((props: any) => React.ReactNode) | - | Polymorphic Base UI render element (e.g. Next.js Link or <button>) |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.