Paragraph
Flexible paragraph component with multiple variants and alignment options
Installation
npx mdx-ui add paragraphUsage
The Paragraph component provides a flexible way to create text paragraphs with different styles and alignments. It uses class-variance-authority for variant management.
Default Paragraph
Lead — large introductory text used below a page title.
Intro — slightly smaller lead, ideal for section introductions.
Default — body copy at base size with comfortable line height.
Large — semibold text for emphasis without a heading.
Small — compact label or metadata text.
Muted — de-emphasised helper text or captions.
Variants
Lead Paragraph
Use lead paragraphs to create emphasis at the beginning of an article or section.
This is a lead paragraph that draws attention with larger text and muted color. Perfect for introductions and opening statements.
<Lead>This is a lead paragraph that draws attention with larger text.</Lead>Intro Paragraph
Similar to lead but with slightly different styling for introductory content.
This is an intro paragraph designed for section introductions. It has comfortable spacing and slightly larger text for improved readability.
<Intro>This is an intro paragraph designed for section introductions.</Intro>Large Paragraph
For emphasized text that needs more prominence.
This is a large paragraph with bold text for important statements.
<Large>
This is a large paragraph with bold text for important statements.
</Large>Small Paragraph
For fine print, captions, or supplementary information.
This is a small paragraph for captions, fine print, or secondary information.
<Small>This is a small paragraph for captions or fine print.</Small>Muted Paragraph
For de-emphasized text or supplementary content.
This is a muted paragraph with reduced visual emphasis. Great for secondary information that supports the main content.
<Muted>This is a muted paragraph with reduced visual emphasis.</Muted>Alignment
Control text alignment with the align prop.
This paragraph is aligned to the left (default alignment).
This paragraph is centered.
This paragraph is aligned to the right.
This paragraph is justified, meaning the text is spread out to align with both left and right margins. This creates a clean, uniform edge on both sides.
<Paragraph align="left">Left aligned (default)</Paragraph>
<Paragraph align="center">Center aligned</Paragraph>
<Paragraph align="right">Right aligned</Paragraph>
<Paragraph align="justify">Justified text</Paragraph>Custom Styling
Combine variants with custom classes for unique styles.
Custom blue paragraph
Italic lead paragraph
Paragraph with custom border
<Paragraph className="text-blue-600">
Custom blue paragraph
</Paragraph>
<Lead className="italic">
Italic lead paragraph
</Lead>
<Paragraph variant="muted" className="border-l-4 pl-4">
Paragraph with custom border
</Paragraph>Using Different Elements
Change the HTML element while maintaining paragraph styling.
Rendered as <p> tag (default)
<Paragraph as="p">Rendered as p tag (default)</Paragraph>
<Paragraph as="div">Rendered as div tag</Paragraph>
<Paragraph as="span">Rendered as span tag</Paragraph>Combining Variants
Mix and match variants and alignment for custom combinations.
Centered lead paragraph
Right-aligned large text
This is a justified intro paragraph that demonstrates how variants can be combined with alignment options to create exactly the style you need.
<Paragraph variant="lead" align="center">
Centered lead paragraph
</Paragraph>
<Paragraph variant="large" align="right">
Right-aligned large text
</Paragraph>
<Paragraph variant="intro" align="justify">
Justified intro paragraph
</Paragraph>Props
Paragraph
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "lead" | "intro" | "large" | "small" | "muted" | "default" | The paragraph style variant |
align | "left" | "center" | "right" | "justify" | "left" | Text alignment |
as | "p" | "div" | "span" | "p" | The HTML element to render |
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Paragraph content |
All standard HTML paragraph attributes are also supported.
Convenience Components
These components are pre-configured versions of Paragraph with specific variants:
- Lead:
variant="lead" - Intro:
variant="intro" - Large:
variant="large" - Small:
variant="small" - Muted:
variant="muted"
All convenience components accept the same props as Paragraph except variant.
Best Practices
Use Semantic HTML
// ✅ Good - semantic HTML
<Paragraph>Body text</Paragraph>
// ❌ Avoid - unless you need non-semantic element
<Paragraph as="div">Body text</Paragraph>Consistent Spacing
// ✅ Good - let the component handle spacing
<Paragraph>First paragraph</Paragraph>
<Paragraph>Second paragraph</Paragraph>
// ❌ Avoid - manual spacing
<Paragraph className="mb-6">First paragraph</Paragraph>
<Paragraph>Second paragraph</Paragraph>Clear Hierarchy
// ✅ Good - clear visual hierarchy
<Lead>Important introduction</Lead>
<Paragraph>Supporting details</Paragraph>
<Muted>Additional context</Muted>
// ❌ Confusing - mixed hierarchy
<Small>Important introduction</Small>
<Large>Additional context</Large>Accessibility
- Use appropriate HTML elements (
<p>for paragraphs) - Maintain good contrast ratios for muted variants
- Ensure text alignment doesn't harm readability (avoid full justification for narrow columns)
- Keep line length comfortable (45-75 characters for optimal readability)
Playground
Try different combinations of variants, alignments, and custom styles to see what works for your content.
On This Page