Label

Installation#

1. Install the dependencies

   npm install cn radix-ui

2. Copy the source into your project

   components/ui/label.tsx

   "use client"import * as React from "react"import { cn } from "cn"import { Label as LabelPrimitive } from "radix-ui"function Label({  className,  ...props}: React.ComponentProps<typeof LabelPrimitive.Root>) {  return (    <LabelPrimitive.Root      data-slot="label"      className={cn(        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",        className      )}      {...props}    />  )}export { Label }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

import { Label } from "@/components/ui/label"