Label.

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function LabelDemo() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="label-demo">Display name</Label>
      <Input id="label-demo" placeholder="Passing traveler" />
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add label

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/label. See Installation if your project is not set up yet.

Manually

1. Install the dependencies

   npm install radix-ui

2. Copy the source into your project

   components/ui/label.tsx

   "use client";
   
   import * as React from "react";
   import { Label as LabelPrimitive } from "radix-ui";
   
   import { cn } from "@/lib/utils";
   
   function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
     return (
       <LabelPrimitive.Root
         data-slot="label"
         className={cn(
           "flex items-center gap-2 text-[13px] 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. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

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

<Label htmlFor="email">Email</Label>