Typography

Available from version 0.5.0

The Typography component helps present design and content clearly and efficiently.

Basics

import { Typography } from 'tailwind-joy/components';

The Typography component wraps around its content, and displays text with specific typographic styles and properties.

National Parks

Yosemite National Park

Yosemite National Park is a national park spanning 747,956 acres (1,169.4 sq mi; 3,025.2 km2) in the western Sierra Nevada of Central California.

import { Sheet, Typography } from 'tailwind-joy/components';

export function TypographyBasics() {
  return (
    <Sheet
      variant="outlined"
      className="flex w-full max-w-[400px] flex-col gap-y-3 rounded-lg p-4"
    >
      <Typography level="h1">National Parks</Typography>
      <Typography level="h2" className="mb-1 text-[1.25rem]">
        Yosemite National Park
      </Typography>
      <Typography>
        Yosemite National Park is a national park spanning 747,956 acres
        (1,169.4 sq mi; 3,025.2 km2) in the western Sierra Nevada of Central
        California.
      </Typography>
    </Sheet>
  );
}

Heading

Use h1 through h4 to render a headline. The produced HTML element will match the semantic headings of the page structure.

h1: Lorem ipsum

h2: What is Lorem Ipsum?

h3: The standard Lorem Ipsum passage.

h4: The smallest headline of the page

import { Box, Typography } from 'tailwind-joy/components';

export function TypographyHeading() {
  return (
    <Box className="flex flex-col gap-3">
      <Typography level="h1">h1: Lorem ipsum</Typography>
      <Typography level="h2">h2: What is Lorem Ipsum?</Typography>
      <Typography level="h3">h3: The standard Lorem Ipsum passage.</Typography>
      <Typography level="h4">h4: The smallest headline of the page</Typography>
    </Box>
  );
}

Title and body

Aside from the heading typographic levels, the Typography component also provides the title-* and body-* type levels.

To ensure proper information hierarchy, we recommend combining them using either the same size or a lower one. For example, using title-lg with body-lg or title-md with body-sm.

Title of the component title-lg

This is the description of the component that contain some information of it. body-md

Title of the component title-md

This is the description of the component that contain some information of it. body-md

Metadata, for example a date. body-sm

Title of the component title-sm

This is the description of the component that contain some information of it. body-sm

Metadata, for example a date. body-xs

import { Box, Sheet, Typography } from 'tailwind-joy/components';

export function TypographyTitleAndBody() {
  return (
    <Box className="flex w-full max-w-prose flex-col gap-4">
      <Sheet
        variant="outlined"
        className="flex w-full flex-col gap-y-3 rounded-lg p-4"
      >
        <Typography level="title-lg">
          Title of the component{' '}
          <Typography
            level="title-lg"
            textColor="var(--joy-success-500)"
            className="font-mono opacity-50"
          >
            title-lg
          </Typography>
        </Typography>
        <Typography level="body-md">
          This is the description of the component that contain some information
          of it.{' '}
          <Typography
            level="body-md"
            textColor="var(--joy-success-500)"
            className="font-mono opacity-50"
          >
            body-md
          </Typography>
        </Typography>
      </Sheet>
      <Sheet
        variant="outlined"
        className="flex w-full flex-col gap-y-3 rounded-lg p-4"
      >
        <Typography level="title-md">
          Title of the component{' '}
          <Typography
            level="title-md"
            textColor="var(--joy-success-500)"
            className="font-mono opacity-50"
          >
            title-md
          </Typography>
        </Typography>
        <Typography level="body-md">
          This is the description of the component that contain some information
          of it.{' '}
          <Typography
            level="body-md"
            textColor="var(--joy-success-500)"
            className="font-mono opacity-50"
          >
            body-md
          </Typography>
        </Typography>
        <Typography level="body-sm">
          Metadata, for example a date.{' '}
          <Typography
            level="body-sm"
            textColor="var(--joy-success-500)"
            className="font-mono opacity-50"
          >
            body-sm
          </Typography>
        </Typography>
      </Sheet>
      <Sheet
        variant="outlined"
        className="flex w-full flex-col gap-y-3 rounded-lg p-4"
      >
        <Typography level="title-sm">
          Title of the component{' '}
          <Typography
            level="title-sm"
            textColor="var(--joy-success-500)"
            className="font-mono opacity-50"
          >
            title-sm
          </Typography>
        </Typography>
        <Typography level="body-sm">
          This is the description of the component that contain some information
          of it.{' '}
          <Typography
            level="body-sm"
            textColor="var(--joy-success-500)"
            className="font-mono opacity-50"
          >
            body-sm
          </Typography>
        </Typography>
        <Typography level="body-xs">
          Metadata, for example a date.{' '}
          <Typography
            level="body-xs"
            textColor="var(--joy-success-500)"
            className="font-mono opacity-50"
          >
            body-xs
          </Typography>
        </Typography>
      </Sheet>
    </Box>
  );
}

Nested Typography

The Typography component renders as a <p> by default. Nested Typography components are rendered as <span> elements (unless customized by the component prop).

Typography lets you create nested typography. Use your imagination to build wonderful user interface.

import { Typography } from 'tailwind-joy/components';

export function TypographyNestedTypography() {
  return (
    <Typography className="max-w-[400px]">
      Typography lets you create <Typography variant="soft">nested</Typography>{' '}
      typography. Use your{' '}
      <Typography variant="outlined" color="success">
        imagination
      </Typography>{' '}
      to build wonderful{' '}
      <Typography variant="solid" color="primary" noWrap>
        user interface
      </Typography>
      .
    </Typography>
  );
}

Customization

Levels

The level prop gives access to a pre-defined scale of typographic values defined in the theme. These values include various heading levels (h1, h2, h3, etc.) as well as body text levels (body-md, body-sm, etc) and can be used to apply consistent typography throughout your application. Additionally, you can also use the level prop to control the font size, weight, line height, and other typographic properties.

h1

h2

h3

h4

title-lg

title-md

title-sm

body-lg

body-md

body-sm

body-xs

import { Typography } from 'tailwind-joy/components';

export function TypographyLevels() {
  return (
    <div>
      <Typography level="h1">h1</Typography>
      <Typography level="h2">h2</Typography>
      <Typography level="h3">h3</Typography>
      <Typography level="h4">h4</Typography>
      <Typography level="title-lg">title-lg</Typography>
      <Typography level="title-md">title-md</Typography>
      <Typography level="title-sm">title-sm</Typography>
      <Typography level="body-lg">body-lg</Typography>
      <Typography level="body-md">body-md</Typography>
      <Typography level="body-sm">body-sm</Typography>
      <Typography level="body-xs">body-xs</Typography>
    </div>
  );
}

Semantic elements

To customize the semantic element used, you can use the component prop. This can be useful in situations where you want to use a different semantic element than the one assigned by the level prop. The component will render as the HTML element defined by component, but with the styles assigned to its respective level.

I render as an h2, but I have h1 styles

import { Typography } from 'tailwind-joy/components';

export function TypographySemanticElements() {
  return (
    <Typography level="h1" component="h2">
      I render as an h2, but I have h1 styles
    </Typography>
  );
}

Decorators

Use the startDecorator and endDecorator props to add supporting icons or elements to the Typography.

The icon automatically adjusts to the scale

The display also changes to flexbox123

import { MdInfoOutline } from 'react-icons/md';
import { Chip, Typography } from 'tailwind-joy/components';
import { iconClass } from 'tailwind-joy/utils';

export function TypographyDecorators() {
  return (
    <div>
      <Typography
        startDecorator={<MdInfoOutline className={iconClass()} />}
        className="mb-4"
      >
        The icon automatically adjusts to the scale
      </Typography>
      <Typography
        level="body-lg"
        endDecorator={
          <Chip component="span" size="sm">
            123
          </Chip>
        }
        className="justify-center"
      >
        The display also changes to flexbox
      </Typography>
    </div>
  );
}

Anatomy

The Typography component is composed of a single root <p> that's assigned the body-md class, unless these defaults are overridden by the level and/or component props.

When one Typography component is nested within another, the nested component renders as a <span> (unless customized as described above).

<p class="tj-typography-root ...">
  <!-- Typography content -->
  <span class="tj-typography-root ...">
    <!-- Nested Typography content -->
  </span>
</p>

API

See the documentation below for a complete reference to all of the props available to the components mentioned here.

• <Box />
• <Chip />
• <Sheet />
• <Typography />