Typography Components
This document outlines a set of Typography components designed to provide consistent text styling across your Next.js application. These components are built with Tailwind CSS classes for easy customization and responsive design.
Installation
These components are part of your project's UI library. No additional installation is required if you're working within the project. If you're using these in a new project, ensure you have Tailwind CSS set up.
Usage
Import the Typography components you need in your React components:
import {
TypographyH1,
TypographyP,
TypographyList,
// ... other components as needed
} from '@/components/ui/typography';
Components
Heading Components
TypographyH1
<TypographyH1 label='Main Heading' />
Props:
label
(string): The text content of the heading
Styling:
- Large, bold text (4xl on mobile, 5xl on larger screens)
- Extra bold font weight
- Tight letter spacing
TypographyH2
<TypographyH2 label='Section Heading' />
Props:
label
(string): The text content of the heading
Styling:
- Large text (3xl)
- Semi-bold font weight
- Bottom border
- Tight letter spacing
TypographyH3
<TypographyH3 label='Subsection Heading' />
Props:
label
(string): The text content of the heading
Styling:
- Medium-large text (2xl)
- Semi-bold font weight
- Tight letter spacing
TypographyH4
<TypographyH4 label='Minor Heading' />
Props:
label
(string): The text content of the heading
Styling:
- Medium text (xl)
- Semi-bold font weight
- Tight letter spacing
Text Components
TypographyP
<TypographyP label='This is a paragraph of text.' />
Props:
label
(string): The text content of the paragraph
Styling:
- Standard line height
- Top margin for all but the first paragraph in a group
TypographyBlockquote
<TypographyBlockquote label='This is a notable quote.' />
Props:
label
(string): The text content of the blockquote
Styling:
- Italic text
- Left border
- Left padding
- Top margin
TypographyList
<TypographyList list={['Item 1', 'Item 2', 'Item 3']} />
Props:
list
(string[]): An array of strings to be rendered as list items
Styling:
- Bulleted list
- Left margin
- Vertical spacing between items
TypographyInlineCode
<TypographyInlineCode label="console.log('Hello, World!')" />
Props:
label
(string): The text content to be displayed as inline code
Styling:
- Monospace font
- Rounded background
- Slight padding
- Semi-bold font weight
TypographyLead
<TypographyLead label='This is a lead paragraph, often used as an introduction.' />
Props:
label
(string): The text content of the lead paragraph
Styling:
- Larger text size (xl)
- Muted text color
TypographyLarge
<TypographyLarge label='This is larger text for emphasis.' />
Props:
label
(string): The text content to be displayed larger
Styling:
- Large text size (lg)
- Semi-bold font weight
TypographySmall
<TypographySmall label='This is smaller text, often used for captions or annotations.' />
Props:
label
(string): The text content to be displayed smaller
Styling:
- Small text size (sm)
- Medium font weight
- No line height (for compact display)
TypographyMuted
<TypographyMuted label='This is muted text, less prominent than normal text.' />
Props:
label
(string): The text content to be displayed in a muted style
Styling:
- Small text size (sm)
- Muted text color
Special Components
TypographyTable
<TypographyTable />
This component renders a pre-defined table with specific content. It doesn't accept any props.
Styling:
- Full width
- Bordered cells
- Alternating background color for rows
- Responsive (horizontal scroll on small screens)
Customization
These components use Tailwind CSS classes, making them easy to customize. To modify the appearance:
- Adjust the Tailwind classes within each component.
- Use Tailwind's configuration file to change the default theme if needed.
- Extend the components with additional props for more dynamic styling.
Accessibility
- Heading components (H1-H4) use semantic HTML tags for proper document structure.
- The table component uses proper
<thead>
and<tbody>
tags for screen reader compatibility. - Ensure you're using heading levels in the correct order for proper document outline.
Best Practices
- Use heading components (H1-H4) in the correct hierarchical order.
- Utilize
TypographyLead
for introductory paragraphs to draw attention. - Use
TypographyMuted
for less important text that shouldn't draw focus. - Employ
TypographyInlineCode
for short code snippets or technical terms within text. - Leverage
TypographyList
for presenting information in an easily scannable format.
Example Usage
Here's an example of how you might combine these components in a page:
import {
TypographyH1,
TypographyP,
TypographyList,
TypographyBlockquote,
TypographyTable,
TypographyLead,
} from '@/components/ui/typography';
export default function ExamplePage() {
return (
<div className='container mx-auto px-4'>
<TypographyH1 label='Welcome to Our Documentation' />
<TypographyLead label='This comprehensive guide will walk you through all the features of our product.' />
<TypographyP label="Let's start with the basics and then move on to more advanced topics." />
<TypographyH2 label='Key Features' />
<TypographyList
list={[
'Easy to use interface',
'Powerful analytics',
'Customizable dashboards',
'Robust API',
]}
/>
<TypographyBlockquote label='Our product has transformed the way we do business. - Happy Customer' />
<TypographyH3 label='Performance Metrics' />
<TypographyTable />
</div>
);
}
This example demonstrates how to use various Typography components to create a structured and visually appealing document.
By using these Typography components consistently throughout your application, you can ensure a cohesive and professional look while maintaining flexibility for different content types.