Rich Text
Token-backed typography for semantic React document and notice content.
Contract
| Axis | Values | Default |
|---|---|---|
variant | document, notice | document |
| content | semantic React children | — |
TRRichText owns the typography and spacing of semantic headings, paragraphs, lists, links, inline code, and emphasis. It does not accept or sanitize raw HTML. Parse and sanitize external content before passing React nodes as children.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/rich-text.css';Scroll inside the code area to read long lines.
Imports
import { TRRichText } from '@tinyrack/ui/components/rich-text';Scroll inside the code area to read long lines.
Playground
Usage
Examples
API
TRRichTextProps extends native div props except dangerouslySetInnerHTML, forwards React 19 ref, and adds variant. The component renders a div with data-variant. Use document for long-form content and notice for compact muted guidance. External HTML remains a consumer trust boundary and must be sanitized before it is converted to React children.