Typography

Text

About

A text component with semantic variants (headings, paragraph, blockquote, code) plus gradient and highlight styles for consistent typography.

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

Code

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

Usage.tsx

import { Typography } from "@/components/ui/typography";

export default function TypographyDemo() {
  return (
    <div className="flex flex-col gap-4 p-6">
      <Typography variant="h1">The Joke Tax Chronicles</Typography>
      <Typography variant="lead">
        A modest tale of typography and taxation.
      </Typography>
      <Typography variant="gradient" as="h2" className="text-3xl font-bold">
        Gradient Heading
      </Typography>
      <Typography variant="p">
        Once upon a time, in a far-off land, there was a very lazy king who
        spent all day lounging on his throne.
      </Typography>
      <Typography variant="blockquote">
        &ldquo;After all,&rdquo; he said, &ldquo;everyone enjoys a good joke, so
        it&apos;s only fair that they should pay for the privilege.&rdquo;
      </Typography>
      <Typography variant="p">
        You can also{" "}
        <Typography as="span" variant="highlight">
          highlight
        </Typography>{" "}
        important words, or reference{" "}
        <Typography as="code" variant="code">
          const answer = 42
        </Typography>{" "}
        inline.
      </Typography>
      <Typography variant="muted">A small muted footnote.</Typography>
    </div>
  );
}