glasscn
Glass Badge

A compact label for metadata and status using glass surface treatments.

Badge
import { GlassBadge } from "@/components/ui/glasscn/glass-badge"

export function BadgeDemo() {
  return <GlassBadge glassVariant="liquid">Badge</GlassBadge>

Installation

$ npx shadcn add @glasscn/glass-badge

Variants

clear
Badge
frosted
Badge
subtle
Badge
liquid
Badge
liquid-refract
Badge

API

Prop
Type
Default
Description
GlassBadgeglassVariant
"clear" | "frosted" | "subtle" | "liquid" | "liquid-refract""clear"
Controls the glass surface treatment.
GlassBadge...props
React.ComponentProps<typeof Badge>-
Props from the underlying shadcn/ui primitive.