Typography
A versatile Typography component for rendering text with customizable styles, including variant-based typography (headings, body text, captions), text alignment, spacing, and all style props.
Installation
Import
Usage
Use Typography for all text content in your application. Choose variants based on semantic meaning: h1-h6 for headings, body1/body2 for paragraphs, caption for small text, and overline for labels. Use gutterBottom for consistent spacing between headings and content. Use noWrap for single-line text that should truncate.
Design Guidelines
Maintain consistent typography scale throughout your application. Use h1 for page titles, h2 for section headings, h3 for subsections. Use body1 for main content and body2 for secondary content. Use caption for metadata and overline for labels. Maintain proper line spacing and readability.
Basic Usage
Simple typography with default styling
All Variants
Complete typography scale from h1 to small
Article Layout
Using typography variants for article content
Text Alignment
Different text alignment options for various use cases
Spacing with Gutter Bottom
Using gutterBottom for consistent vertical spacing
Truncation with No Wrap
Preventing text wrapping for single-line content
Semantic HTML Elements
Using component prop for semantic HTML
packages.sections.api
Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
variant | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'small' | 'overline' | 'inherit' | 'body2' | Typography variant controlling font size, weight, and line height |
align | 'inherit' | 'left' | 'center' | 'right' | 'justify' | 'inherit' | Text alignment |
gutterBottom | boolean | false | Adds bottom margin (mb-4) for spacing below the text |
noWrap | boolean | false | Prevents text wrapping, applying truncation for overflow |
component | 'p' | 'span' | — | The HTML element to render (only for body variants) |
className | string | — | packages.commonProps.className.description |
Accessibility
Accessibility features and considerations
Typography automatically adds role='heading' and aria-level attributes for heading variants (h1-h6). Ensure proper heading hierarchy (h1 → h2 → h3, etc.) for screen readers. Use semantic variants that match the content's importance.