Typography

import Typography from "@shpaw415/mui-lite/Typography";

Why use it

Use Typography for all readable text so font family, weight, and theme colors stay consistent. Prefer it over raw headings and paragraphs when you need `sx`, color tokens, or a polymorphic `Element` tag.

Demo

Variants (scale)

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

subtitle1

subtitle2

body1 — default paragraph text.

body2 — secondary body.

captionoverline

Colors

Primary color

Secondary color

Error color

Warning color

Success color

textSecondary / muted

Semantic Element + variant

Element="h1"

Element h2 + variant h2

variant h5 as <h1>

Example

import Typography from "@shpaw415/mui-lite/Typography";
 
export function Title() {
  return (
    <>
      {/* variant drives size/weight (wins over Tailwind preflight) */}
      <Typography variant="h1">Page title</Typography>
      <Typography variant="h2">Section</Typography>
      <Typography variant="body1">Body copy</Typography>
      <Typography color="primary">Highlighted body</Typography>
      {/* Semantic tag + type scale independently */}
      <Typography variant="h5" component="h1">
        Visual h5, semantic h1
      </Typography>
    </>
  );
}

Props

Prop	Type	Default
variant	h1–h6 \| subtitle1/2 \| body1/2 \| caption \| button \| overline	body1
Element / component	HTML tag name	from variant
color	primary \| secondary \| error \| warning \| success \| textSecondary	—
align	left \| center \| right \| justify	inherit
gutterBottom / noWrap / paragraph	boolean	false
sx	SxProps	—