Starting your winter arc? 🥶 Get 25% off every plan and template with
WensityWensity

Typography

Type primitives for six heading levels, prose blocks, lead and muted text, inline code, and consistently styled lists.

typographyheadingproseleadmutedcodetextdocumentationcontent
Loading preview

Examples

Practical examples and common states for the same installable component.

Headings

Defines hierarchy across titles and sections.

examples/typography-headings.tsx
import { Heading } from "@/components/wensity/typography";


export function Headings() {
  return (
    <div className="flex flex-col gap-3">
      <Heading level={1}>Heading One</Heading>
      <Heading level={2}>Heading Two</Heading>
      <Heading level={3}>Heading Three</Heading>
      <Heading level={4}>Heading Four</Heading>
      <Heading level={5}>Heading Five</Heading>
      <Heading level={6}>Heading Six</Heading>
    </div>
  );
}

Prose

Optimized long-form content and documentation.

examples/typography-prose.tsx
import { Prose } from "@/components/wensity/typography";


export function Article() {
  return (
    <Prose>
      <h2>Getting started</h2>
      <p>
        Wensity primitives are unstyled by default and composed with
        <strong> Tailwind</strong> utility classes.
      </p>
      <blockquote>Good defaults matter more than options.</blockquote>
      <ul>
        <li>Install with the CLI or copy the source directly.</li>
        <li>Every primitive ships with keyboard and focus support.</li>
      </ul>
    </Prose>
  );
}

Lead

Emphasized introductory and supporting text.

examples/typography-lead.tsx
import { Heading, Lead } from "@/components/wensity/typography";


export function Intro() {
  return (
    <div className="flex flex-col gap-2">
      <Heading level={2}>Wensity UI</Heading>
      <Lead>
        A primitive library built for teams who care about the details
        other kits skip.
      </Lead>
    </div>
  );
}

Muted

Secondary text for descriptions and metadata.

examples/typography-muted.tsx
import { Muted } from "@/components/wensity/typography";


export function FileMeta() {
  return (
    <div>
      <p className="text-[15px] font-medium">Quarterly report.pdf</p>
      <Muted>2.4 MB · Uploaded by Jordan Lee</Muted>
    </div>
  );
}

Inline Code

Displays technical values and code references.

examples/typography-inline-code.tsx
import { InlineCode } from "@/components/wensity/typography";


export function Instructions() {
  return (
    <p>
      Run <InlineCode>pnpm install</InlineCode> to fetch dependencies.
    </p>
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add typography

Usage

Import Typography from @/components/wensity/typography and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { Heading, Lead, Muted, InlineCode } from "@/components/wensity/typography";


export function Example() {
  return (
    <div className="flex flex-col gap-3">
      <Heading level={2}>Design systems that scale</Heading>
      <Lead>A shared language of type, color, and spacing.</Lead>
      <Muted>Updated 2 hours ago</Muted>
      <p>
        Import primitives from <InlineCode>@/components/wensity/typography</InlineCode>.
      </p>
    </div>
  );
}

Props

PropTypeDefaultDescription
level1 | 2 | 3 | 4 | 5 | 61Heading level and its matching visual scale.
asChildboolean-Renders a different element while keeping the level's scale.

Featured in React footer components.