var Component=(()=>{var g=Object.create;var o=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var x=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),_=(l,n)=>{for(var s in n)o(l,s,{get:n[s],enumerable:!0})},E=(l,n,s,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of N(n))!b.call(l,a)&&a!==s&&o(l,a,{get:()=>n[a],enumerable:!(c=B(n,a))||c.enumerable});return l};var v=(l,n,s)=>(s=l!=null?g(f(l)):{},E(n||!l||!l.__esModule?o(s,"default",{value:l,enumerable:!0}):s,l)),C=l=>E(o({},"__esModule",{value:!0}),l);var m=x((A,y)=>{y.exports=_jsx_runtime});var k={};_(k,{default:()=>u,frontmatter:()=>D});var e=v(m()),D={title:"Badge",description:"Displays a badge or a component that looks like a badge.",component:!0};function F(l){let n={a:"a",code:"code",div:"div",h3:"h3",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...l.components},{ComponentPreview:s,ComponentSource:c,Step:a,Steps:d,Tabs:p,TabsContent:i,TabsList:h,TabsTrigger:t}=n;return s||r("ComponentPreview",!0),c||r("ComponentSource",!0),a||r("Step",!0),d||r("Steps",!0),p||r("Tabs",!0),i||r("TabsContent",!0),h||r("TabsList",!0),t||r("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("div",{className:"grid gap-3 lg:grid-cols-2 xl:grid-cols-2",children:[(0,e.jsx)(s,{name:"badge-01",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return Badge; } `,__src__:"registry/default/examples/components/badges/badge-01.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Badge;"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-02",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return Badge; } `,__src__:"registry/default/examples/components/badges/badge-02.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"rounded"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Badge;"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-03",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`// Dependencies: pnpm install lucide-react import { Zap } from "lucide-react"; import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return ( ); } `,__src__:"registry/default/examples/components/badges/badge-03.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"// Dependencies: pnpm install lucide-react"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Zap } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"gap-1"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Zap"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"-ms-0.5"'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"8"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"strokeWidth"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"aria-hidden"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"true"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Badge"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-04",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return 6; } `,__src__:"registry/default/examples/components/badges/badge-04.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"min-w-4 px-1"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">6;"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-05",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { cn } from "@/lib/utils"; import { badgeVariants } from "@/components/ui/badge"; export function BadgeDemo() { return ( Link ); } `,__src__:"registry/default/examples/components/badges/badge-05.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { badgeVariants } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"a"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" href"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"#"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" badgeVariants"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ variant: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"default"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "hover:bg-primary/80"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Link"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-06",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return ( Badge 73 ); } `,__src__:"registry/default/examples/components/badges/badge-06.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"items-baseline gap-1"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Badge"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-[0.5rem] font-medium text-primary-foreground/60"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" 73"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-07",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`// Dependencies: pnpm install lucide-react import { Check } from "lucide-react"; import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return ( ); } `,__src__:"registry/default/examples/components/badges/badge-07.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"// Dependencies: pnpm install lucide-react"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Check } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"gap-1"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Check"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-emerald-500"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"12"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" strokeWidth"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"1"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" aria-hidden"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"true"'})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Badge"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-08",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return ( Badge ); } `,__src__:"registry/default/examples/components/badges/badge-08.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"gap-1.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-1.5 rounded-full bg-emerald-500"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" aria-hidden"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"true"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Badge"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-09",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return ( Badge ); } `,__src__:"registry/default/examples/components/badges/badge-09.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"gap-1.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-1.5 rounded-full bg-amber-500"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" aria-hidden"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"true"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Badge"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-10",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { return ( Badge ); } `,__src__:"registry/default/examples/components/badges/badge-10.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"gap-1.5"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"size-1.5 rounded-full bg-red-500"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" aria-hidden"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"true"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Badge"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-11",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`// Dependencies: pnpm install lucide-react import { Check } from "lucide-react"; import { cn } from "@/lib/utils"; import { badgeVariants } from "@/components/ui/badge"; import { Checkbox } from "@/components/ui/checkbox"; export function BadgeDemo() { return (

); } `,__src__:"registry/default/examples/components/badges/badge-11.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"// Dependencies: pnpm install lucide-react"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Check } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { badgeVariants } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Checkbox } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/checkbox"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"label"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" badgeVariants"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ variant: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"default"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }),"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "cursor-pointer hover:bg-primary/80 has-[[data-state=unchecked]]:bg-muted has-[[data-state=unchecked]]:text-muted-foreground has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-ring/70"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"flex items-center gap-1"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Checkbox"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"badge-selectable"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"peer sr-only after:absolute after:inset-0"'})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" defaultChecked"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Check"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"12"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" strokeWidth"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"hidden peer-data-[state=checked]:block"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" aria-hidden"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"true"'})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"select-none"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">Selectable"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-12",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`// Dependencies: pnpm install lucide-react "use client"; import { useState } from "react"; import { X } from "lucide-react"; import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { const [isActive, setIsActive] = useState(true); if (!isActive) return null; return ( Removable ); } `,__src__:"registry/default/examples/components/badges/badge-12.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"// Dependencies: pnpm install lucide-react"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { X } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"isActive"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"setIsActive"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"isActive) "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Removable"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"-my-px -me-1.5 -ms-px inline-flex size-5 shrink-0 items-center justify-center rounded-[inherit] p-0 opacity-60 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" onClick"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsActive"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"X"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"12"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"strokeWidth"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"aria-hidden"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"true"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})}),(0,e.jsx)(s,{name:"badge-13",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`// Dependencies: pnpm install lucide-react "use client"; import { useState } from "react"; import { X } from "lucide-react"; import { Badge } from "@/components/ui/badge"; export function BadgeDemo() { const [isActive, setIsActive] = useState(true); if (!isActive) return null; return ( Tag ); } `,__src__:"registry/default/examples/components/badges/badge-13.tsx",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#6A737D"},children:"// Dependencies: pnpm install lucide-react"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { useState } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { X } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "lucide-react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/badge"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeDemo"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" const"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ["}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"isActive"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"setIsActive"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"] "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" useState"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"true"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" if"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"!"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"isActive) "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"return"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" null"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"Badge"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" variant"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"rounded-md px-2 py-1"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" Tag"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"button"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"-my-[5px] -me-2 -ms-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-[inherit] p-0 opacity-60 transition-opacity hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70"'})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" onClick"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{() "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" setIsActive"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"false"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:")}"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" aria-label"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"Delete"'})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"X"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" size"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"14"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"strokeWidth"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"aria-hidden"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"true"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})})]}),` `,(0,e.jsxs)(n.h3,{id:"installation",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(p,{defaultValue:"cli",children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(i,{value:"cli",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add "https://designali.in/r/badge" `,__npmCommand__:`npx shadcn@latest add "https://designali.in/r/badge" `,__yarnCommand__:`npx shadcn@latest add "https://designali.in/r/badge" `,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://designali.in/r/badge" `,__bunCommand__:`bunx --bun shadcn@latest add "https://designali.in/r/badge" `,children:(0,e.jsx)(n.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"npx"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:" add"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "https://designali.in/r/badge"'})]})})})})}),(0,e.jsx)(i,{className:"flex w-full",value:"manual",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,e.jsx)(c,{name:"badge",children:(0,e.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/src/lib/utils"; const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ); export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return (

); } export { Badge, badgeVariants }; `,__src__:"registry/default/ui/badge.tsx",__style__:"default",children:(0,e.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cva, "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"type"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" VariantProps } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "class-variance-authority"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "@/src/lib/utils"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(n.span,{style:{color:"#79B8FF"},children:" badgeVariants"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" cva"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variants: {"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant: {"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" default:"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "border-transparent bg-primary text-primary-foreground hover:bg-primary/80"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" secondary:"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" destructive:"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:' "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" outline: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"text-foreground"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" defaultVariants: {"})}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" variant: "}),(0,e.jsx)(n.span,{style:{color:"#9ECBFF"},children:'"default"'}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:");"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" interface"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeProps"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" extends"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" React"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLAttributes"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"HTMLDivElement"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:">,"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" VariantProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" badgeVariants> {}"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"function"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" Badge"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"variant"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#FFAB70"},children:"props"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" }"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" BadgeProps"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:" return"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(n.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(n.span,{style:{color:"#B392F0"},children:"badgeVariants"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"({ variant }), className)} {"}),(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"props} />"})]}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,e.jsx)(n.span,{className:"line",children:(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,e.jsx)(n.span,{className:"line",children:" "}),` `,(0,e.jsxs)(n.span,{className:"line",children:[(0,e.jsx)(n.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(n.span,{style:{color:"#E1E4E8"},children:" { Badge, badgeVariants };"})]})]})})})}),(0,e.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(n.h3,{id:"props",children:[(0,e.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Prop"}),(0,e.jsx)(n.th,{children:"Type"}),(0,e.jsx)(n.th,{children:"Description"}),(0,e.jsx)(n.th,{children:"Default"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"variant"}),(0,e.jsx)(n.td,{children:"any"}),(0,e.jsx)(n.td,{children:"Width of the dot pattern"}),(0,e.jsx)(n.td,{children:"16"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"size"}),(0,e.jsx)(n.td,{children:"any"}),(0,e.jsx)(n.td,{children:"Height of the dot pattern"}),(0,e.jsx)(n.td,{children:"16"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"className"}),(0,e.jsx)(n.td,{children:"string"}),(0,e.jsx)(n.td,{children:"Class name of the dot pattern"}),(0,e.jsx)(n.td,{children:"-"})]})]})]})]})}function u(l={}){let{wrapper:n}=l.components||{};return n?(0,e.jsx)(n,{...l,children:(0,e.jsx)(F,{...l})}):F(l)}function r(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(k);})(); ;return Component;

Prop	Type	Description	Default
variant	any	Width of the dot pattern	16
size	any	Height of the dot pattern	16
className	string	Class name of the dot pattern	-