Eyebrow

A small Graphik Web label that introduces a section heading.

Best AI Resume Builder

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

export default function EyebrowDemo() {
  return <Eyebrow>Best AI Resume Builder</Eyebrow>
}

Installation

pnpm dlx shadcn@latest add @kickresume/eyebrow

Usage

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

export function EyebrowExample() {
  return <Eyebrow>Best AI Resume Builder</Eyebrow>
}

Composition

Use the eyebrow immediately before a display heading. The component owns its canonical 8px separation from that heading.

Best AI Resume Builder

Build a resume. Land a job.

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

export default function EyebrowComposition() {
  return (
    <section className="max-w-xl text-center">
      <Eyebrow>Best AI Resume Builder</Eyebrow>
      <h2 className="font-serif text-[length:var(--kr-fs-h2,2rem)] leading-[1.2] tracking-[var(--kr-tracking-h2,-1px)]">
        Build a resume. Land a job.
      </h2>
    </section>
  )
}

API Reference

Eyebrow accepts all native div props, including className.