Eyebrow.

import { Eyebrow } from "@/components/ui/eyebrow";
import { StatusDot } from "@/components/ui/status-dot";

export default function EyebrowDemo() {
  return (
    <div className="max-w-md">
      <Eyebrow>
        <StatusDot /> The internet, a little more blocky
      </Eyebrow>
      <h2 className="mt-4 text-4xl leading-[1.08] font-medium tracking-[-0.06em]">
        Small computers.
        <br />
        Entire <span className="text-primary">worlds.</span>
      </h2>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add eyebrow

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/eyebrow. See Installation if your project is not set up yet.

Manually

1. Copy the source into your project

   components/ui/eyebrow.tsx

   import * as React from "react";
   
   import { cn } from "@/lib/utils";
   
   /** The small mono uppercase label that sits above Lantern headings. */
   function Eyebrow({ className, ...props }: React.ComponentProps<"div">) {
     return (
       <div
         data-slot="eyebrow"
         className={cn(
           "flex items-center gap-2.5 font-mono text-[10px] leading-loose font-semibold tracking-[0.2em] text-success uppercase",
           className,
         )}
         {...props}
       />
     );
   }
   
   export { Eyebrow };

2. Update the import paths to match your project

   The source imports cn from @/lib/utils and uses status-dot.

Usage#

import { Eyebrow } from "@/components/ui/eyebrow";

<Eyebrow>Get started</Eyebrow>