Accept terms and conditions

) } `,__src__:"registry/miami/examples/label-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Checkbox"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/checkbox"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/label"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" LabelDemo"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"flex items-center space-x-2"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Checkbox"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"terms"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"terms"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">Accept terms and conditions"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/default/examples/label-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import { Checkbox } from "~/components/ui/checkbox" import { Label } from "~/components/ui/label" export function LabelDemo() { return (

Accept terms and conditions

) } `,__src__:"registry/default/examples/label-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Checkbox"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/checkbox"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/label"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" LabelDemo"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"flex items-center space-x-2"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Checkbox"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"terms"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"terms"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">Accept terms and conditions"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" "})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" )"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(F,{defaultValue:"cli",children:[(0,e.jsxs)(p,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(t,{value:"cli",children:(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"bash","data-theme":"lumos-dark",__rawString__:`npx nyxb@latest add label `,__npmCommand__:`npx nyxb@latest add label `,__yarnCommand__:`npx nyxb@latest add label `,__pnpmCommand__:`pnpm dlx nyxb@latest add label `,__bunCommand__:`bunx --bun nyxb@latest add label `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"lumos-dark",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:" nyxb@latest"}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:" label"})]})})})})}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(a,{children:"Install the following dependencies:"}),(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"bash","data-theme":"lumos-dark",__rawString__:` @radix-ui/react-label `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"lumos-dark",style:{display:"grid"},children:(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" @radix-ui/react-label"})})})})}),(0,e.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(o,{name:"label",children:[(0,e.jsx)(l.figure,{__src__:"registry/miami/ui/label.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`"use client" import * as LabelPrimitive from "@radix-ui/react-label" import { type VariantProps, cva } from "class-variance-authority" import * as React from "react" import { ny } from "~/lib/utils" const labelVariants = cva( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", ) const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } `,__src__:"registry/miami/ui/label.tsx",__style__:"miami",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"use client"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FF078A"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" LabelPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"@radix-ui/react-label"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" VariantProps"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"cva"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"class-variance-authority"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FF078A"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/lib/utils"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" labelVariants"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" cva"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" Label"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:""}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:""}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" &"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" VariantProps"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"LabelPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:"labelVariants"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"))"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"displayName"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" LabelPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Root"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"displayName"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }"})]})]})})}),(0,e.jsx)(l.figure,{__src__:"registry/default/ui/label.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`"use client" import * as LabelPrimitive from "@radix-ui/react-label" import { type VariantProps, cva } from "class-variance-authority" import * as React from "react" import { ny } from "~/lib/utils" const labelVariants = cva( "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", ) const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } `,__src__:"registry/default/ui/label.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:[(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"use client"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FF078A"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" LabelPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"@radix-ui/react-label"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" VariantProps"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"cva"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"class-variance-authority"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FF078A"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"react"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/lib/utils"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" labelVariants"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:" cva"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" Label"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:""}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:","})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:""}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" &"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" VariantProps"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:""})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"LabelPrimitive.Root"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:"ny"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FEE75C"},children:"labelVariants"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"(), "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"}"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" />"})}),` `,(0,e.jsx)(l.span,{"data-line":"",children:(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"))"})}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"displayName"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" LabelPrimitive"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Root"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"displayName"})]}),` `,(0,e.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" }"})]})]})})})]}),(0,e.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`import { Label } from "~/components/ui/label" `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#14F195"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:' "'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"~/components/ui/label"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'})]})})})}),` `,(0,e.jsx)(l.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(l.pre,{style:{backgroundColor:"#121212",color:"#dbd7caee"},tabIndex:"0","data-language":"tsx","data-theme":"lumos-dark",__rawString__:`Your email address `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"lumos-dark",style:{display:"grid"},children:(0,e.jsxs)(l.span,{"data-line":"",children:[(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9945FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#00FFFF"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FF00FF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#FF9900"},children:"email"}),(0,e.jsx)(l.span,{style:{color:"#FF990099"},children:'"'}),(0,e.jsx)(l.span,{style:{color:"#DBD7CAEE"},children:">Your email address"})]})})})})]})}function D(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(m,{...n})}):m(n)}function s(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(L);})(); ;return Component;