Headline

Two-tone heading: the emphasised part inherits the foreground colour and anything wrapped in <Headline.Muted> drops to muted-foreground, the way Apple splits a sentence into a strong lead and a quieter continuation.

We make it simple to manage projects, and keep your team aligned.

<Headline size="display">
  We make it simple to manage projects,{" "}
  <Headline.Muted>and keep your team aligned.</Headline.Muted>
</Headline>

Install

npx shadcn@latest add @dami/headline

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

Source

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

type HeadlineProps = React.ComponentProps<"h1"> & {
  /** Rendered element. Defaults to h1. */
  as?: "h1" | "h2" | "h3" | "p"
  /** Size preset from the typography scale. */
  size?: "display" | "headline" | "title"
}

/**
 * Two-tone heading: the emphasised part inherits the foreground colour and
 * anything wrapped in <Headline.Muted> drops to muted-foreground, the way
 * Apple splits a sentence into a strong lead and a quieter continuation.
 */
function Headline({
  as: Comp = "h1",
  size = "headline",
  className,
  ...props
}: HeadlineProps) {
  return (
    <Comp
      data-slot="headline"
      className={cn(
        size === "display" && "type-display",
        size === "headline" && "type-headline",
        size === "title" && "type-title",
        "text-foreground",
        className
      )}
      {...props}
    />
  )
}

function HeadlineMuted({ className, ...props }: React.ComponentProps<"span">) {
  return (
    <span
      data-slot="headline-muted"
      className={cn("font-medium text-muted-foreground", className)}
      {...props}
    />
  )
}

Headline.Muted = HeadlineMuted

export { Headline, HeadlineMuted }