Separator.

import { Separator } from "@/components/ui/separator";

export default function SeparatorDemo() {
  return (
    <div className="w-full max-w-sm">
      <div className="space-y-1">
        <h4 className="font-display text-base font-medium tracking-tight">Lantern network</h4>
        <p className="text-sm text-muted-foreground">Hub sites served from in-game computers.</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center gap-4 font-mono text-[11px] tracking-[0.12em] text-muted-foreground uppercase">
        <span>Sites</span>
        <Separator orientation="vertical" />
        <span>Servers</span>
        <Separator orientation="vertical" />
        <span>Guestbook</span>
      </div>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add separator

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/separator. 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/separator.tsx

   "use client";
   
   import * as React from "react";
   import { Separator as SeparatorPrimitive } from "radix-ui";
   
   import { cn } from "@/lib/utils";
   
   function Separator({
     className,
     orientation = "horizontal",
     decorative = true,
     ...props
   }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
     return (
       <SeparatorPrimitive.Root
         data-slot="separator"
         decorative={decorative}
         orientation={orientation}
         className={cn(
           "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
           className,
         )}
         {...props}
       />
     );
   }
   
   export { Separator };

3. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

import { Separator } from "@/components/ui/separator";

<Separator />