Markdown

A stored markdown document rendered with the kit's parts: anchored headings, chip inline code, CodeBlock fences, Table tables, sanitized HTML.

Headings

Slug ids, a hover # anchor to the right, smooth scroll on click.

A section heading#

Hover the heading: a faint # appears to its right and links here. Click it and the page scrolls smoothly.

A subsection#

Body text sits at text-base and wraps at 80ch, so a wide card still reads like a page.

Inline code and citations

Backticks become a quiet chip that wraps and breaks anywhere; unbackticked file paths get a mono span.

Inline code such as useDebounce, Table, and a long path like walmart-mvp/frontend/src/features/parts/PartPreviewModal.tsx:859-866 renders as a quiet chip that wraps inside its line and breaks anywhere. An unbackticked citation like table.tsx:371-376 or docs/design-language/03-status-language.md:8 gets a muted mono span.

Fenced code

A fence becomes CodeBlock with its language; the fence's info string decides the colorizer.

{ "name": "@versable-git/ui", "version": "0.2.0" }

# publish the kit
pnpm --filter @versable-git/ui publish --access restricted

Tables

A GFM table renders through the kit Table at compact density; long mono paths wrap instead of holding a column wide.

Combination	Produces	Where used
`variant="text" circle`	A copy control that only appears on row hover	`walmart-mvp/frontend/src/features/parts/PartPreviewModal.tsx:93-99`
No `children`, default `circle`	An icon-only copy button beside a mono id	`speedway/app/routes/admin/scrape-requests.tsx:176-181`

Raw HTML, sanitized

A README's centered badge block and a details block survive; scripts, handlers, and comments do not.

The shared UI system every Versable app is built from

Raw HTML that survives sanitizing

A details block, an aligned paragraph, an image. A <script> or an onclick would be dropped.

Links

Four shapes: in-app through linkAs, external in a new tab, hash with smooth scroll, and a bare relative citation.

An in-app link goes through the app's router link. An external one opens in a new tab. A hash link scrolls smoothly. A bare relative path like ../../packages/ui/src/markdown/markdown.tsx shows the path itself, since it names a file, not a page.

Composite: a stored doc

A whole document with animate on: the top-level blocks cascade in with the house fadeInUp.

Every doc page in the playground's docs browser is this component inside a Card, with the doc's H1 lifted into the PageTitle above.

Contract#

content: string (required): the markdown source. GFM is on.
linkAs: the app's router link for hrefs that start with /.
html (default true): raw HTML is sanitized, comments dropped.

Sanctioned combinations#

Combination	Produces	Why
`Markdown` inside a `Card` under a `PageTitle`	The docs browser page	The H1 is stripped server-side and shown as the title

<Card noAnimate>
  <Markdown content={doc.content} linkAs={Link} />
</Card>

A blockquote keeps the 80ch measure and the muted ink.

Styling slots

Every className the component exposes, and what it reaches

className: the root wrapper (sets text-base)
linkAs: the app's router link for in-app hrefs
html: let sanitized raw HTML through, or show it as text
animate: cascade the top-level blocks in