2c:I[378303,["/_next/static/chunks/3f973cikg0z9p.js","/_next/static/chunks/1igbpzagpvi1l.js","/_next/static/chunks/2rtx4oofog2ow.js","/_next/static/chunks/0zqr6qscpxzy_.js","/_next/static/chunks/1k6tj87d1l2z4.js","/_next/static/chunks/41jod2ec4qagc.js","/_next/static/chunks/2vnuoq_5b7wsc.js","/_next/static/chunks/3jhchi5tt3lfv.js","/_next/static/chunks/1r2ozj9-ltiao.js","/_next/static/chunks/2u5h26vx2fmkk.js","/_next/static/chunks/2wzm1c51hzc8g.js","/_next/static/chunks/062evay-qvrz2.js","/_next/static/chunks/3kexzvncaevr-.js","/_next/static/chunks/3umntt2ceu7kv.js","/_next/static/chunks/3ulgqz3r9-nzj.js","/_next/static/chunks/3-01s9my0f__n.js","/_next/static/chunks/2i9mi0qutz1ww.js","/_next/static/chunks/0nri49zi0q0qa.js","/_next/static/chunks/2ot7c1d1dxokk.js","/_next/static/chunks/34km4lc1pzv1d.js","/_next/static/chunks/1spxzhiz9fgfc.js","/_next/static/chunks/1wareq7_rla84.js","/_next/static/chunks/27l3c-l52sasj.js","/_next/static/chunks/3-m94dhfkx6xl.js","/_next/static/chunks/3illacb2t7eeu.js","/_next/static/chunks/3q5_wd-zocont.js","/_next/static/chunks/2a6v7j49fw4u8.js","/_next/static/chunks/1ara7piiifk2w.js","/_next/static/chunks/04nxscdrimn9z.js","/_next/static/chunks/2sxqek2q2z1_1.js","/_next/static/chunks/3ndlo4ncip5pp.js","/_next/static/chunks/02tdfy9ttger-.js","/_next/static/chunks/221nx-pect-i7.js","/_next/static/chunks/17u6xof7n5ooq.js","/_next/static/chunks/2x435wabinu4k.js","/_next/static/chunks/0ama9zd0m-obv.js"],"PageEntrance"] 2d:I[378303,["/_next/static/chunks/3f973cikg0z9p.js","/_next/static/chunks/1igbpzagpvi1l.js","/_next/static/chunks/2rtx4oofog2ow.js","/_next/static/chunks/0zqr6qscpxzy_.js","/_next/static/chunks/1k6tj87d1l2z4.js","/_next/static/chunks/41jod2ec4qagc.js","/_next/static/chunks/2vnuoq_5b7wsc.js","/_next/static/chunks/3jhchi5tt3lfv.js","/_next/static/chunks/1r2ozj9-ltiao.js","/_next/static/chunks/2u5h26vx2fmkk.js","/_next/static/chunks/2wzm1c51hzc8g.js","/_next/static/chunks/062evay-qvrz2.js","/_next/static/chunks/3kexzvncaevr-.js","/_next/static/chunks/3umntt2ceu7kv.js","/_next/static/chunks/3ulgqz3r9-nzj.js","/_next/static/chunks/3-01s9my0f__n.js","/_next/static/chunks/2i9mi0qutz1ww.js","/_next/static/chunks/0nri49zi0q0qa.js","/_next/static/chunks/2ot7c1d1dxokk.js","/_next/static/chunks/34km4lc1pzv1d.js","/_next/static/chunks/1spxzhiz9fgfc.js","/_next/static/chunks/1wareq7_rla84.js","/_next/static/chunks/27l3c-l52sasj.js","/_next/static/chunks/3-m94dhfkx6xl.js","/_next/static/chunks/3illacb2t7eeu.js","/_next/static/chunks/3q5_wd-zocont.js","/_next/static/chunks/2a6v7j49fw4u8.js","/_next/static/chunks/1ara7piiifk2w.js","/_next/static/chunks/04nxscdrimn9z.js","/_next/static/chunks/2sxqek2q2z1_1.js","/_next/static/chunks/3ndlo4ncip5pp.js","/_next/static/chunks/02tdfy9ttger-.js","/_next/static/chunks/221nx-pect-i7.js","/_next/static/chunks/17u6xof7n5ooq.js","/_next/static/chunks/2x435wabinu4k.js","/_next/static/chunks/0ama9zd0m-obv.js"],"RevealText"] 2e:I[871255,["/_next/static/chunks/3f973cikg0z9p.js","/_next/static/chunks/1igbpzagpvi1l.js","/_next/static/chunks/2rtx4oofog2ow.js","/_next/static/chunks/0zqr6qscpxzy_.js","/_next/static/chunks/1k6tj87d1l2z4.js","/_next/static/chunks/41jod2ec4qagc.js","/_next/static/chunks/2vnuoq_5b7wsc.js","/_next/static/chunks/3jhchi5tt3lfv.js","/_next/static/chunks/1r2ozj9-ltiao.js","/_next/static/chunks/2u5h26vx2fmkk.js","/_next/static/chunks/2wzm1c51hzc8g.js","/_next/static/chunks/062evay-qvrz2.js","/_next/static/chunks/3kexzvncaevr-.js","/_next/static/chunks/3umntt2ceu7kv.js","/_next/static/chunks/3ulgqz3r9-nzj.js","/_next/static/chunks/3-01s9my0f__n.js","/_next/static/chunks/2i9mi0qutz1ww.js","/_next/static/chunks/0nri49zi0q0qa.js","/_next/static/chunks/2ot7c1d1dxokk.js","/_next/static/chunks/34km4lc1pzv1d.js","/_next/static/chunks/1spxzhiz9fgfc.js","/_next/static/chunks/1wareq7_rla84.js","/_next/static/chunks/27l3c-l52sasj.js","/_next/static/chunks/3-m94dhfkx6xl.js","/_next/static/chunks/3illacb2t7eeu.js","/_next/static/chunks/3q5_wd-zocont.js","/_next/static/chunks/2a6v7j49fw4u8.js","/_next/static/chunks/1ara7piiifk2w.js","/_next/static/chunks/04nxscdrimn9z.js","/_next/static/chunks/2sxqek2q2z1_1.js","/_next/static/chunks/3ndlo4ncip5pp.js","/_next/static/chunks/02tdfy9ttger-.js","/_next/static/chunks/221nx-pect-i7.js","/_next/static/chunks/17u6xof7n5ooq.js","/_next/static/chunks/2x435wabinu4k.js","/_next/static/chunks/0ama9zd0m-obv.js"],"ExampleViewer"] 2f:T79a,// src/components/ui/badge.tsx import { mergeProps } from "@base-ui/react/merge-props" import { useRender } from "@base-ui/react/use-render" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" const badgeVariants = cva( "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", render, ...props }: useRender.ComponentProps<"span"> & VariantProps) { return useRender({ defaultTagName: "span", props: mergeProps<"span">( { className: cn(badgeVariants({ variant }), className), }, props ), render, state: { slot: "badge", variant, }, }) } export { Badge, badgeVariants } 24:[["$","$L2c","badge",{"className":"mx-auto max-w-5xl","children":[["$","$L1e",null,{"children":["$","p",null,{"className":"mb-5 font-mono text-xs uppercase tracking-widest text-accent-500","children":"Data display"}]}],["$","$L2d",null,{"as":"h1","text":"Badge","className":"text-4xl font-medium tracking-tight sm:text-5xl"}],["$","$L1e",null,{"order":1,"children":[["$","p",null,{"className":"mt-4 max-w-2xl text-base leading-7 text-muted-foreground","children":"Small labels for status, categories, and counts."}],"$undefined","$undefined",["$","p",null,{"className":"mt-3 break-all font-mono text-xs text-muted-foreground","children":"src/components/ui/badge.tsx"}]]}],["$","$L1e",null,{"order":2,"children":["$","$L2e",null,{"source":"import { Badge } from \"@/components/ui/badge\";\nexport default function BadgeExample() {\n return (\n

\n Published\n Draft\n In review\n Failed\n Archived\n

\n 12 projects\n \n \n Active\n \n

\n );\n}\n","componentSource":"$2f","children":["$","div",null,{"className":"space-y-6","children":["$L30","$L31"]}]}]}],"$L32","$L33"]}]]

BadgeBadge

Built from the app library

Try every state

BadgeBadge

Built from the app library

Try every state

Badge

Badge