Accept terms and conditions

) } `,__src__:"registry/default/example/label-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" Checkbox "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/checkbox"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" Label "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LabelDemo"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"flex items-center space-x-2"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Checkbox id"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"terms"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"terms"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Accept terms and conditions"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(d,{defaultValue:"cli",children:[(0,l.jsxs)(p,{className:"w-min justify-start rounded-full border-2 bg-popover p-1",children:[(0,l.jsx)(i,{className:"relative rounded-full bg-transparent px-4 py-1 font-semibold text-primary shadow-none transition-none data-[state=active]:text-background data-[state=active]:shadow-none !h-min",value:"cli",children:"CLI"}),(0,l.jsx)(i,{className:"relative rounded-full bg-transparent px-4 py-1 font-semibold text-primary shadow-none transition-none data-[state=active]:text-background data-[state=active]:shadow-none !h-min",value:"manual",children:"Manual"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @pujan-modha/pm-ui add label `,__npmCommand__:`npx @pujan-modha/pm-ui add label `,__yarnCommand__:`npx @pujan-modha/pm-ui add label `,__pnpmCommand__:`pnpm dlx @pujan-modha/pm-ui add label `,__bunCommand__:`bunx --bun @pujan-modha/pm-ui add label `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" @pujan-modha/pm-ui"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" label"})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(F,{children:[(0,l.jsx)(r,{children:"Install the following dependencies:"}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-label `,__npmCommand__:`npm install @radix-ui/react-label `,__yarnCommand__:`yarn add @radix-ui/react-label `,__pnpmCommand__:`pnpm add @radix-ui/react-label `,__bunCommand__:`bun add @radix-ui/react-label `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npm"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" install"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" @radix-ui/react-label"})]})})})}),(0,l.jsx)(r,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(c,{name:"label",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva( "text-sm font-medium leading-none text-primary 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,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" LabelPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@radix-ui/react-label"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" cva"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" VariantProps "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "class-variance-authority"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" cn "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" labelVariants "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" cva"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "text-sm font-medium leading-none text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" Label "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" React"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:""}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">(({"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ..."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"props "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"},"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"LabelPrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"labelVariants"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"(),"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {..."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"displayName "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" LabelPrimitive"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Root"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"displayName"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" Label "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})]})]})})})}),(0,l.jsx)(r,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from "@/components/ui/label" `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:" Label "}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]})})})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`Your email address `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#FFF"},children:"Your email address"}),(0,l.jsx)(e.span,{style:{color:"#FFF8"},children:""})]})})})})]})}function b(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(u,{...n})}):u(n)}function s(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(P);})(); ;return Component;