Typography

The typography foundation exports lightweight React primitives with predefined Tailwind classes for headings, body text, links, code, quotes, and lists. These components inherit the active font family from the application; in this docs site, the base font is Inter. All components also accept className, which is merged with the default classes.

Preview

Heading 1

Heading 2

Heading 3

Heading 4

Paragraph text uses text-base with leading-7 for comfortable reading.

Lead text is larger and uses muted foreground color.

Strong is rendered as a paragraph with semibold weight.

Small text uses muted foreground and leading-6.

Muted text is the smallest text style in the set.

const greeting = "Hello World";Standard link

Blockquote adds a left border, padding, and italic styling.

Unordered list item
Another list item

Ordered list item
Second step

Usage

tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import {
  H1,
  H2,
  H3,
  H4,
  P,
  Lead,
  Strong,
  Small,
  Muted,
  Code,
  Link,
  Blockquote,
  List,
  OrderedList,
} from '@e-infra/design-system'

<H1>Main Heading</H1>
<P>Standard body text</P>
<Blockquote>Quoted content</Blockquote>

Exported Components

Component	Element	Classes
`H1`	`h1`	`text-4xl font-bold tracking-tight`
`H2`	`h2`	`text-3xl font-semibold tracking-tight`
`H3`	`h3`	`text-2xl font-semibold tracking-tight`
`H4`	`h4`	`text-xl font-semibold`
`P`	`p`	`text-base leading-7`
`Lead`	`p`	`text-lg leading-8 text-muted-foreground`
`Strong`	`p`	`text-base font-semibold leading-7`
`Small`	`p`	`text-sm text-muted-foreground leading-6`
`Muted`	`p`	`text-xs text-muted-foreground leading-5`
`Code`	`code`	`text-sm font-mono bg-muted px-2 py-1 rounded`
`Link`	`a`	`text-primary underline hover:no-underline`
`Blockquote`	`blockquote`	`border-l-4 border-primary pl-4 italic`
`List`	`ul`	`list-disc list-inside space-y-2`
`OrderedList`	`ol`	`list-decimal list-inside space-y-2`

Text Styles

Headings

tsx

1
2
3
4
<H1>Main Heading</H1>
<H2>Section Heading</H2>
<H3>Sub-heading</H3>
<H4>Sub-section</H4>

Body Text

tsx

1
2
3
4
5
<P>Standard paragraph text for body content.</P>
<Lead>Larger introductory paragraph with muted foreground.</Lead>
<Strong>Emphasized paragraph with semibold weight.</Strong>
<Small>Secondary supporting copy.</Small>
<Muted>Auxiliary metadata or helper text.</Muted>

Inline Elements

tsx

1
2
<Code>const greeting = "Hello World";</Code>
<Link href="#">Standard link</Link>

Structured Content

tsx

1
2
3
4
5
6
7
8
9
10
11
<Blockquote>Quoted content with a left border.</Blockquote>

<List>
  <li>First item</li>
  <li>Second item</li>
</List>

<OrderedList>
  <li>First step</li>
  <li>Second step</li>
</OrderedList>

Props

Component	Props
`H1`, `H2`, `H3`, `H4`	`React.HTMLAttributes<HTMLHeadingElement>`
`P`, `Lead`, `Strong`, `Small`, `Muted`	`React.HTMLAttributes<HTMLParagraphElement>`
`Code`	`React.HTMLAttributes<HTMLElement>`
`Link`	`React.AnchorHTMLAttributes<HTMLAnchorElement>`
`Blockquote`	`React.HTMLAttributes<HTMLQuoteElement>`
`List`	`React.HTMLAttributes<HTMLUListElement>`
`OrderedList`	`React.HTMLAttributes<HTMLOListElement>`