Markdown

Render Markdown in an assistant interface.

Ready to build.

• Read the components
• Compose your interface

View code

import { Markdown } from "@stack/ui/markdown";

export default function Example() {
  return (
    <Markdown>
      {"**Ready to build.**\n\n- Read the components\n- Compose your interface"}
    </Markdown>
  );
}

Usage

import { Markdown } from "@stack/ui/markdown";

Tables wrap content within their containers by default. Use the table options menu to allow horizontal scrolling, or set tableLayout="scroll" as the initial layout. tableLayout="stacked" remains available for simple tables on narrow screens.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

Markdown

Also accepts native element props.

Prop	Type	Required	Description
allowElement	AllowElement	No	Decide whether an HTML element may be rendered.
allowedElements	readonly string[]	No	HTML elements allowed in rendered output.
children	string	No	Content rendered inside the component.
components	Components	No	Custom Markdown element renderers.
disallowedElements	readonly string[]	No	HTML elements excluded from rendered output.
rehypePlugins	PluggableList	No	HTML syntax-tree plugins.
remarkPlugins	PluggableList	No	Markdown syntax-tree plugins.
remarkRehypeOptions	Readonly<Options>	No	Options for converting Markdown into HTML nodes.
skipHtml	boolean	No	Skip raw HTML in Markdown.
unwrapDisallowed	boolean	No	Keep children of disallowed elements.
urlTransform	UrlTransform	No	Transform URLs before rendering.
mode	"static" | "streaming"	No	Render complete static Markdown or an evolving stream.
dir	"auto" | "ltr" | "rtl"	No	Text direction. "ltr" / "rtl" force a single direction. "auto" detects direction per block: in streaming mode via parsed markdown blocks, in static mode via a rehype pass on each semantic block (headings, paragraphs, list items, table cells, etc.).
BlockComponent	ComponentType<BlockProps>	No	Custom component used to render Markdown blocks.
parseMarkdownIntoBlocksFn	((markdown: string) => string[])	No	Split Markdown into independently rendered blocks.
parseIncompleteMarkdown	boolean	No	Repair incomplete Markdown while streaming.
normalizeHtmlIndentation	boolean	No	Normalize HTML block indentation to prevent 4+ spaces being treated as code blocks.
className	string	No	Additional CSS classes for the underlying element.
shikiTheme	[ThemeInput, ThemeInput]	No	Light and dark syntax-highlighting themes.
mermaid	MermaidOptions	No	Mermaid rendering options.
codeBlockMaxHeight	string | number	No	Max height for fenced code blocks.
controls	ControlsConfig	No	Configure code, table, and diagram controls.
isAnimating	boolean	No	Whether streamed content is currently animating.
tableMaxHeight	string | number	No	Max height for tables.
animated	boolean | AnimateOptions	No	Configure animated Markdown rendering.
caret	"circle" | "block"	No	Caret style for streaming content.
plugins	PluginConfig	No	Rendering plugins.
remend	RemendOptions	No	Options for repairing incomplete Markdown.
linkSafety	LinkSafetyConfig	No	Link safety configuration.
portal	PortalTarget	No	DOM node for Streamdown overlays, or a function returning one.
allowedTags	AllowedTags	No	Custom tags to allow through sanitization with their permitted attributes
fallbackComponent	ComponentType<Record<string, unknown> & ExtraProps>	No	Fallback component for HTML tags or allowedTags entries that have no matching key in the components map.
literalTagContent	string[]	No	Tags whose children should be treated as plain text (no markdown parsing).
disableAutolinkProtocols	string[]	No	Disable GFM / CommonMark autolinking for specific URL protocols (e.g. bare email addresses become mailto: autolinks).
translations	Partial<StreamdownTranslations>	No	Override UI strings for i18n / custom labels
icons	Partial<IconMap>	No	Custom icons to override the default icons used in controls
prefix	string	No	Tailwind CSS prefix to prepend to all utility classes (e.g. "tw" produces tw:flex instead of flex).
lineNumbers	boolean	No	Display source line numbers.
onAnimationStart	(() => void)	No	Called when isAnimating transitions from false to true.
onAnimationEnd	(() => void)	No	Called when isAnimating transitions from true to false.
tableLayout	"wrap" | "stacked" | "scroll"	No	Wrap content within its container, stack simple rows on narrow screens, or allow horizontal scrolling. Default: "wrap".