Typography

Build a consistent hierarchy using semantic text components.

View component source ↗

Preview

Example

A minimal example to get started.

A clear hierarchy

Consistent typography helps readers scan, understand, and act.

Keep supporting details quiet.

Installation

Install this component and its dependencies in a project initialized with shadcn.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/typography.json

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

import { TypographyH2, TypographyP, TypographyMuted } from "@/components/ui/typography";

export default function Example() {
  return (
    <div className="max-w-sm">
      <TypographyH2>A clear hierarchy</TypographyH2>
      <TypographyP>Consistent typography helps readers scan, understand, and act.</TypographyP>
      <TypographyMuted>Keep supporting details quiet.</TypographyMuted>
    </div>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

TypographyH1

TypographyH1 properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLHeadingElement> \| undefined React.Ref<HTMLHeadingElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLHeadingElement> \| undefined React.FocusEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLHeadingElement> \| undefined React.FocusEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLHeadingElement, Element> \| undefined React.ChangeEventHandler<HTMLHeadingElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLHeadingElement> \| undefined React.KeyboardEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLHeadingElement> \| undefined React.MouseEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the element is activated.

TypographyH2

TypographyH2 properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLHeadingElement> \| undefined React.Ref<HTMLHeadingElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLHeadingElement> \| undefined React.FocusEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLHeadingElement> \| undefined React.FocusEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLHeadingElement, Element> \| undefined React.ChangeEventHandler<HTMLHeadingElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLHeadingElement> \| undefined React.KeyboardEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLHeadingElement> \| undefined React.MouseEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the element is activated.

TypographyH3

TypographyH3 properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLHeadingElement> \| undefined React.Ref<HTMLHeadingElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLHeadingElement> \| undefined React.FocusEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLHeadingElement> \| undefined React.FocusEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLHeadingElement, Element> \| undefined React.ChangeEventHandler<HTMLHeadingElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLHeadingElement> \| undefined React.KeyboardEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLHeadingElement> \| undefined React.MouseEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the element is activated.

TypographyH4

TypographyH4 properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLHeadingElement> \| undefined React.Ref<HTMLHeadingElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLHeadingElement> \| undefined React.FocusEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLHeadingElement> \| undefined React.FocusEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLHeadingElement, Element> \| undefined React.ChangeEventHandler<HTMLHeadingElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLHeadingElement> \| undefined React.KeyboardEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLHeadingElement> \| undefined React.MouseEventHandler<HTMLHeadingElement> \| undefined	`—`	Called when the element is activated.

TypographyP

TypographyP properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLParagraphElement> \| undefined React.Ref<HTMLParagraphElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLParagraphElement> \| undefined React.KeyboardEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLParagraphElement> \| undefined React.MouseEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the element is activated.

TypographyBlockquote

TypographyBlockquote properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLQuoteElement> \| undefined React.Ref<HTMLQuoteElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLQuoteElement> \| undefined React.FocusEventHandler<HTMLQuoteElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLQuoteElement> \| undefined React.FocusEventHandler<HTMLQuoteElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLQuoteElement, Element> \| undefined React.ChangeEventHandler<HTMLQuoteElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLQuoteElement> \| undefined React.KeyboardEventHandler<HTMLQuoteElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLQuoteElement> \| undefined React.MouseEventHandler<HTMLQuoteElement> \| undefined	`—`	Called when the element is activated.

TypographyList

TypographyList properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLUListElement> \| undefined React.Ref<HTMLUListElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLUListElement> \| undefined React.FocusEventHandler<HTMLUListElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLUListElement> \| undefined React.FocusEventHandler<HTMLUListElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLUListElement, Element> \| undefined React.ChangeEventHandler<HTMLUListElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLUListElement> \| undefined React.KeyboardEventHandler<HTMLUListElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLUListElement> \| undefined React.MouseEventHandler<HTMLUListElement> \| undefined	`—`	Called when the element is activated.

TypographyInlineCode

TypographyInlineCode properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLElement> \| undefined React.Ref<HTMLElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLElement> \| undefined React.FocusEventHandler<HTMLElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLElement> \| undefined React.FocusEventHandler<HTMLElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLElement, Element> \| undefined React.ChangeEventHandler<HTMLElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLElement> \| undefined React.KeyboardEventHandler<HTMLElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLElement> \| undefined React.MouseEventHandler<HTMLElement> \| undefined	`—`	Called when the element is activated.

TypographyLead

TypographyLead properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLParagraphElement> \| undefined React.Ref<HTMLParagraphElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLParagraphElement> \| undefined React.KeyboardEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLParagraphElement> \| undefined React.MouseEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the element is activated.

TypographyLarge

TypographyLarge properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLDivElement> \| undefined React.Ref<HTMLDivElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLDivElement> \| undefined React.FocusEventHandler<HTMLDivElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLDivElement, Element> \| undefined React.ChangeEventHandler<HTMLDivElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLDivElement> \| undefined React.KeyboardEventHandler<HTMLDivElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLDivElement> \| undefined React.MouseEventHandler<HTMLDivElement> \| undefined	`—`	Called when the element is activated.

TypographySmall

TypographySmall properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLElement> \| undefined React.Ref<HTMLElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLElement> \| undefined React.FocusEventHandler<HTMLElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLElement> \| undefined React.FocusEventHandler<HTMLElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLElement, Element> \| undefined React.ChangeEventHandler<HTMLElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLElement> \| undefined React.KeyboardEventHandler<HTMLElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLElement> \| undefined React.MouseEventHandler<HTMLElement> \| undefined	`—`	Called when the element is activated.

TypographyMuted

TypographyMuted properties
Prop	Type	Default	Description
`ref`	React.Ref<HTMLParagraphElement> \| undefined React.Ref<HTMLParagraphElement> \| undefined	`—`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
`defaultChecked`	boolean \| undefined boolean \| undefined	`—`	Initial checked state for an uncontrolled control.
`defaultValue`	string \| number \| readonly string[] \| undefined string \| number \| readonly string[] \| undefined	`—`	Initial value for an uncontrolled component.
`className`	string \| undefined string \| undefined	`—`	Additional CSS classes merged with the component styles.
`id`	string \| undefined string \| undefined	`—`	Unique identifier used to associate labels and descriptions.
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`onFocus`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control receives focus.
`onBlur`	React.FocusEventHandler<HTMLParagraphElement> \| undefined React.FocusEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the control loses focus.
`onChange`	React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined React.ChangeEventHandler<HTMLParagraphElement, Element> \| undefined	`—`	Called when the underlying form control changes; inspect the event for its value.
`onKeyDown`	React.KeyboardEventHandler<HTMLParagraphElement> \| undefined React.KeyboardEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when a key is pressed while this element is focused.
`onClick`	React.MouseEventHandler<HTMLParagraphElement> \| undefined React.MouseEventHandler<HTMLParagraphElement> \| undefined	`—`	Called when the element is activated.

Usage notes

Choose the heading level for document structure, not just appearance. Combine the exported paragraph and supporting-text styles as needed.