# HTML Overrides (ShadCN) This showcase demonstrates mapping raw HTML/markdown tags to design-system components while keeping StreamMDX's patch model and deterministic output. ## Why this matters - You can keep the default worker/parser behavior and only swap the render layer. - Streaming performance remains stable because overrides run after block parsing. - This is the safest path for design-system alignment without forking parser behavior. ## Example: map table tags to ShadCN wrappers ```tsx import type { TableElements } from "stream-mdx"; const tableElements: Partial = { table: ({ className, ...props }) => (

), th: ({ className, ...props }) =>

, td: ({ className, ...props }) =>

, }; ; ``` ## Example: map raw HTML tags ```tsx import type { HtmlElements } from "stream-mdx"; const htmlElements: Partial = { blockquote: ({ className, ...props }) => (

), pre: ({ className, ...props }) => (
    
), }; ; ``` ## Rendered HTML samples
This blockquote is emitted from raw HTML content and can be restyled safely via htmlElements.blockquote.

Scenario Expected behavior

Wide table Horizontal overflow wrapper prevents layout shift.

Streaming updates Only tail patches update; prior rows remain stable.

## Guardrails - Keep sanitization enabled for untrusted HTML. - Use overflow wrappers for `table`, `pre`, and block math renders. - Avoid adding heavy client hooks in overrides unless deferred.