---
title: Typography
description: Styles for headings, paragraphs, lists...etc
component: true
---

<ComponentExample
  src="/components/examples/typography/demo.tsx"
  className="[&>div.min-h-[350px]]:p-6"
>
  <TypographyDemo />
</ComponentExample>

## h1

<ComponentExample src="/components/examples/typography/h1.tsx" extractClassname>
  <TypographyH1 />
</ComponentExample>

## h2

<ComponentExample src="/components/examples/typography/h2.tsx" extractClassname>
  <TypographyH2 />
</ComponentExample>

## h3

<ComponentExample src="/components/examples/typography/h3.tsx" extractClassname>
  <TypographyH3 />
</ComponentExample>

## h4

<ComponentExample src="/components/examples/typography/h4.tsx" extractClassname>
  <TypographyH4 />
</ComponentExample>

## p

<ComponentExample src="/components/examples/typography/p.tsx" extractClassname>
  <TypographyP />
</ComponentExample>

## blockquote

<ComponentExample
  src="/components/examples/typography/blockquote.tsx"
  extractClassname
>
  <TypographyBlockquote />
</ComponentExample>

## table

<ComponentExample src="/components/examples/typography/table.tsx">
  <TypographyTable />
</ComponentExample>

## list

<ComponentExample
  src="/components/examples/typography/list.tsx"
  extractClassname
>
  <TypographyList />
</ComponentExample>

## Inline code

<ComponentExample
  src="/components/examples/typography/inline-code.tsx"
  extractClassname
>
  <TypographyInlineCode />
</ComponentExample>

## Lead

<ComponentExample
  src="/components/examples/typography/lead.tsx"
  extractClassname
>
  <TypographyLead />
</ComponentExample>

## Large

<ComponentExample
  src="/components/examples/typography/large.tsx"
  extractClassname
>
  <TypographyLarge />
</ComponentExample>

## Small

<ComponentExample
  src="/components/examples/typography/small.tsx"
  extractClassname
>
  <TypographySmall />
</ComponentExample>

## Muted

<ComponentExample
  src="/components/examples/typography/muted.tsx"
  extractClassname
>
  <TypographyMuted />
</ComponentExample>
