Typography in UI Libraries

MUI

• https://mui.com/material-ui/api/typography/
• Single Typography component.
• Styling presets via the variant prop (body1, body2, button, caption, h1, h2, h3, h4, h5, h6, inherit, overline, subtitle1, subtitle2).
• Customizable via props (sx prop and other props) or classes.
• Possible to separate style and semantic meaning via component prop.

shadcn/ui

With shadcn/ui, the UI Library is generated and put in the consumer's source code.

• https://ui.shadcn.com/docs/components/typography
• Has different components for text and headings.
• Styling presets via standalone components (h1, h2, h3, h4, p, blockquote, table, list, Inline code, Lead, Large, Small, Muted).
• Customizable via classes.
• Not possible to separate style and semantic meaning.

Mantine

• https://mantine.dev/core/text/
• Has different components for text and headings.
• Text component has styling presets via size prop (xs, sm, md, lg, xl)
• Title component has styling presets via size prop (h1, h2, h3, h4, h5, h6)
• Customizable via props (fw for fontWeight, c for color, etc.) or classes.
• Possible to separate style and semantic meaning via order prop.

Antd

• https://ant.design/components/typography
• Has different components for text and headings.
• Title component has styling presets via level prop (1, 2, 3, 4, 5)
• Text component has no styling presets.
• Both can change color via the type prop, which has a select numbers of semantic colors (default, secondary, success, warning, danger).
• Customizable via classes.
• Not possible to separate style and semantic meaning.

Radix UI

• https://www.radix-ui.com/themes/docs/components/text and https://www.radix-ui.com/themes/docs/components/heading
• Has different components for text and headings.
• Text component has styling presets via size prop (1, 2, 3, 4, 5, 6, 7, 8, 9)
• Heading component has styling presets via size prop (1, 2, 3, 4, 5, 6, 7, 8, 9)
• Customizable via classes and props.
• Possible to separate style and semantic meaning via as prop.