RichText
Semantic content wrapper over the Kibo typography styles, with document and compact variants for articles, overlays, and email previews.
Import
import { RichText } from "@repo/design-system/components/content/rich-text";Default variant
Styling semantic content without utility soup
DefaultRichText gives the design system a reusable semantic-content wrapper instead of repeating raw typography classes across the app.
What it is for
Use it for docs pages, changelogs, rich notification content, long-form previews, and admin surfaces where you want HTML structure to carry most of the styling work.
Why a wrapper matters
- It gives product code a stable DS import instead of coupling it to a Kibo class name.
- It centralizes variants like compact mode for overlays and email previews.
- It keeps semantic tags first-class: headings, tables, code blocks, lists, and details all just work.
Example table
| Variant | Best for | Heading scale |
|---|---|---|
| default | Docs, articles, change logs | Editorial |
| compact | Overlays, inbox content, email previews | Panel-friendly |
Code block
<RichText variant="compact">
<h1>Email preview</h1>
<p>Semantic HTML stays readable in constrained UI surfaces.</p>
</RichText>The DS component name is stable. The underlying primitive can evolve without changing app imports.
When not to use it
Do not wrap arbitrary app layout in RichText. It is for semantic content, not for composing forms, tables-as-app-shells, or dashboard grids.
Compact variant
Inbox preview with sane proportions
Compact mode preserves hierarchy, but avoids the oversized document-scale hero treatment that looks wrong in sheets and dialogs.
Included styles
It still supports bold text, emphasis, links, inline code, checklists, and structured content.
- Readable in dark mode surfaces
- Tighter paragraph spacing
- Smaller, calmer heading hierarchy