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:

1. Adjust the Tailwind classes within each component.
2. Use Tailwind's configuration file to change the default theme if needed.
3. 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

1. Use heading components (H1-H4) in the correct hierarchical order.
2. Utilize TypographyLead for introductory paragraphs to draw attention.
3. Use TypographyMuted for less important text that shouldn't draw focus.
4. Employ TypographyInlineCode for short code snippets or technical terms within text.
5. 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.