Renders documents, code, and tables in a shared reading style.
Local preview. It doesn't affect real accounts, environments, or run data.
Compare the same example at each size and density. Switching keeps input values and selection state. Size guidance and comparisons
Review deployment results in a shared design language. Jump to Results or review the design tokens. The inline identifier is service_id.
Never convey status with color alone; provide a label and context with it.
| Environment | Status | Runs |
|---|---|---|
| Staging | Passed | 12 |
| Production | Needs review | 3 |
import { Button } from '@surflane/ui'
<Button onClick={inspect}>Inspect logs</Button>environment: staging
retries: 3Outdated guidance is replaced by the current documentation.1
This is a local rendering example. ↩
Render CommonMark documents, plus GFM tables, task lists, strikethrough, and footnotes, in the shared reading style. Code fences reuse CodeBlock's highlighting, copy action, and horizontal scrolling.
Don't render MDX or executable HTML. Pass CommonMark or GFM source instead. Don't use task lists as form inputs, since they're read-only. Use Checkbox instead. The calling screen decides remote document fetching, permissions, link destinations, and image visibility.
Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons
named article → scoped heading hierarchy and anchors → prose / links / lists / blockquote → Table.ScrollArea / highlighted CodeBlock / notes
Tab reaches links and copy buttons, and Enter activates them natively. Headings start at h2 by default. Each instance's internal links point to its own IDs. HTML is excluded, and the default URL policy blocks unsafe URLs. Long tables and code scroll independently instead of overflowing the document.
Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.
Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.
// Needs react-markdown and remark-gfm: npm install react-markdown remark-gfm
import { Markdown } from '@surflane/ui/markdown'
<Markdown
source={documentSource}
label='Deployment guide'
headingLevel={2}
codeWrap={false}
/>| Prop | Contract | Default |
|---|---|---|
source | CommonMark + GitHub flavored Markdown string | required |
label | article and nested code/table region names | Markdown content |
labels | code(label, line), table(label, line), task, and the copy, copied and copyError text of its code blocks | English |
headingLevel | render Markdown h1 at this semantic level; deeper headings clamp to h6 | 2 |
codeWrap | visually wrap fenced code without changing copied text | false |
ref / className | root HTMLDivElement / additional class | — |
The table lists the common wrapper's main props. See the package type declarations for the full types.