Accept terms and conditions

); } `,__src__:"registry/default/examples/label-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Checkbox } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/checkbox"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" LabelDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"flex items-center space-x-2"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Checkbox"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" id"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"terms"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"terms"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Accept terms and conditions"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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)(a,{children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(d,{value:"cli",children:"CLI"}),(0,l.jsx)(d,{value:"manual",children:"Manual"})]}),(0,l.jsx)(i,{value:"cli",children:(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/label" `,__npmCommand__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/label" `,__yarnCommand__:`npx shadcn@latest add "https://ui.fingertip.com/r/styles/default/label" `,__pnpmCommand__:`pnpm dlx shadcn@latest add "https://ui.fingertip.com/r/styles/default/label" `,__bunCommand__:`bun x --bun shadcn@latest add "https://ui.fingertip.com/r/styles/default/label" `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "https://ui.fingertip.com/r/styles/default/label"'})]})})})})}),(0,l.jsx)(i,{value:"manual",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(o,{children:"Install the following dependencies:"}),(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"bash","data-theme":"github-dark",__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":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"npm"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" install"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:" @radix-ui/react-label"})]})})})}),(0,l.jsx)(o,{children:"Copy and paste the following code into your project."}),(0,l.jsx)(r,{name:"label",children:(0,l.jsx)(e.figure,{__src__:"registry/default/ui/label.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`"use client"; import * as LabelPrimitive from "@radix-ui/react-label"; import { cva, type VariantProps } from "class-variance-authority"; import * as React from "react"; import { cn } from "@/lib/utils"; export const labelVariants = cva( "font-sans text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70", { variants: { variant: { default: "", glass: "backdrop-blur-sm bg-background/60 border border-border/50 px-2.5 py-1 rounded-md shadow-sm", }, }, defaultVariants: { variant: "default", }, }, ); const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...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":"github-dark",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"use client"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" LabelPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@radix-ui/react-label"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cva, "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" VariantProps } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "class-variance-authority"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" labelVariants"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" cva"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "font-sans text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variants: {"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variant: {"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" glass:"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "backdrop-blur-sm bg-background/60 border border-border/50 px-2.5 py-1 rounded-md shadow-sm"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variant: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"default"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:");"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:" Label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"LabelPrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"labelVariants"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ variant }), className)}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"));"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Label.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" LabelPrimitive.Root.displayName;"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Label };"})]})]})})})}),(0,l.jsx)(o,{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.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import { Label } from "@/components/ui/label"; `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:";"})]})})})}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`Your email address `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Label"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"email"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Your email address"})]})})})})]})}function F(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 L(k);})(); ;return Component;