Overview
Prose provides consistently styled body text paragraphs with automatic spacing via CSS adjacent sibling selectors. No manual margin classes needed.
Key Features
- Consistent typography for body text paragraphs
- Automatic spacing after headings and between paragraphs
- Muted foreground color for secondary content
When to Use
Use Prose for:
- Body text paragraphs following section headings
- Help text or descriptions in settings pages
- Content blocks that need consistent typography
Skip Prose when:
- -Form field descriptions - use FormDescription instead
- -Single-line labels - use Label instead
- -Heading subtitles - use SectionHeading description prop instead
Examples
Basic Usage
Simple body text paragraph with consistent styling and muted color.
Welcome to Centercode Agentic. This guide will help you set up your first testing program and configure your team preferences.
Multiple Paragraphs
Multiple Prose components automatically space themselves correctly.
Each section below covers a specific aspect of the setup process. Follow along to get your environment ready.
If you have questions at any point, check our documentation or reach out to support.
With SectionHeading
Prose automatically has correct spacing after SectionHeading components.
Getting Started
This content uses space-y-content for proper spacing after the heading. Parent containers control spacing, not the components themselves.
Next Steps
Subsections also maintain proper spacing from the content above.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Text content for the paragraph |
className | string | - | Additional CSS classes for overrides |
Usage
import { SectionHeading, Prose } from '@/ui/components';
// Parent container controls spacing between siblings
<div className="space-y-content">
<SectionHeading level={2}>Getting Started</SectionHeading>
<Prose>
Welcome to Centercode Agentic. This guide will help you set up
your first testing program and configure your team preferences.
</Prose>
</div>
// Multiple paragraphs with semantic spacing
<div className="space-y-content">
<Prose>
Each section below covers a specific aspect of the setup process.
Follow along to get your environment ready.
</Prose>
<Prose>
If you have questions at any point, check our documentation
or reach out to support.
</Prose>
</div>
// Semantic spacing tokens:
// - space-y-content (16px) - tight spacing within content areas
// - space-y-section (24px) - spacing between sections
// - space-y-block (32px) - spacing between major blocks