Eyebrow

Small uppercase label that sits above a headline, rendered as a soft pill. Mirrors the "WORK MANAGEMENT, SIMPLIFIED" chip in the reference designs.

Work management, simplified

<Eyebrow>Work management, simplified</Eyebrow>

Install

npx shadcn@latest add @dami/eyebrow

Or without the namespace: npx shadcn@latest add https://ui.dami.uy/r/eyebrow.json

Source

import * as React from "react"
import { cn } from "@/registry/dami/lib/utils"

/**
 * Small uppercase label that sits above a headline, rendered as a soft pill.
 * Mirrors the "WORK MANAGEMENT, SIMPLIFIED" chip in the reference designs.
 */
function Eyebrow({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="eyebrow"
      className={cn(
        "type-eyebrow inline-flex items-center rounded-full border border-border/60 bg-card px-3.5 py-1.5 text-foreground shadow-soft",
        className
      )}
      {...props}
    />
  )
}

export { Eyebrow }