Display

Component

About

A large brand-typeface headline text element with three size steps, used as a page or section statement line rather than a document heading.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Display to your project and fits it to your theme.

Code

How Display is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Display from "@/components/ui/display";

export default function DisplayDemo() {
  return (
    <div className="flex w-full flex-col gap-10 bg-background p-8 text-foreground">
      <div className="flex flex-col gap-2">
        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
          The display cut — 20 letters touched
        </p>
        <Display level={1}>Widening access across borders</Display>
        <p className="mt-2 max-w-[58ch] text-sm leading-relaxed text-muted-foreground">
          Redrob is Border spelled backwards, so the only letters this touches
          are the ones that enclose something. Every counter is opened on the 40
          degree rake, in the direction the light travels. Every other letter is
          set exactly as drawn.
        </p>
      </div>

      <div className="flex flex-col gap-3">
        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
          The three sizes — 42px and up
        </p>
        <Display level={1}>Borders, reversed</Display>
        <Display level={2}>Borders, reversed</Display>
        <Display level={3}>Borders, reversed</Display>
      </div>

      <div className="flex flex-col gap-2">
        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
          What is opened — A B D O P Q R a b d e g o p q 0 4 6 8 9
        </p>
        <Display level={2}>ABDOPQR abdegopq 04689</Display>
        <Display level={3}>CEFHIJKLMNSTUVWXYZ cfhijklmnrstuvwxyz 12357</Display>
        <p className="mt-2 max-w-[58ch] text-sm leading-relaxed text-muted-foreground">
          The second line has no enclosures, so nothing in it is cut. In the
          word Redrob, five of the six letters are opened.
        </p>
      </div>
    </div>
  );
}