MDX components

Every component below is available without an import. The examples show every visual variant, so this page is also the reference for the documentation theme.

Button

Button supports the standard shadcn variant and size props. Add href to render it as a link, and use align="left", "center", or "right" to position it in the documentation column.

Tabs

Tabs supports the default and line variants. Each Tab needs a title and can have a stable value.

Accordion

Accordion works as a group of AccordionItem elements or as a concise, one-item disclosure. Set multiple to keep more than one item open.

CodeBlock

CodeBlock uses GitHub syntax highlighting and preserves every newline as a hard code line. Use showLineNumbers when a reader may need to reference a line.

export const theme = "github";
export const showLineNumbers = true;

CodeSnippet

CodeSnippet pairs a rendered preview with its implementation. Source longer than three lines is collapsed behind a gradient; select View Code to reveal a scrollable code pane and copy it. Pass the preview as children and the source through code.

const title = "Keep examples compact"
const details = [
"Readers can reveal the implementation when they need it.",
"The open code pane keeps long examples within the page.",
"Use the copy button to take the complete snippet.",
]

export function CompactExample() {
return (
  <Callout
    type="tip"
    title={title}
    description={details.join(" ")}
  />
)
}

CodeBlockGroup

CodeBlockGroup groups code blocks into tabs. It supports the same default and line tab variants as Tabs.

pnpm add @heyo-sh/heyo-docs

pnpm dev

Callout

Callout supports note, warning, info, tip, check, and danger. Each type has a matching icon and colour accent. Use title and description for a concise callout, or provide richer MDX content as children.

Badge

Badge is the shadcn primitive. Use its variants to add a compact label inline with your content. All supported variants are shown below.

It also accepts standard span attributes and render when the badge should use a different HTML element.

Properties

Properties groups Property entries into an API-style reference. A property accepts the following attributes:

The entries below cover the required and optional states, a property with and without a type, rich MDX content, and a property without a description.

{ "/guides/old": "/guides/new" }

Columns

Columns supports two or three columns, while Column supports card and plain variants. A href makes a card linkable.

Related topics

RelatedTopics creates a compact list of nearby documentation. Each RelatedTopic takes an icon, name, and src destination.

Images, videos, and files

Markdown images plus the Image and Video components support local paths relative to the current MDX file. They are copied into the production build, so the same source works during development and after deployment. Both components add an optional caption and the standard framed documentation treatment.

Video uses the browser's native player, enables controls by default, and accepts native video props such as loop, muted, and poster.

Use File with src or href to make a local download discoverable. Without a URL, File remains the compact item used by Tree.

Hover Card

HoverCard is the shadcn Hover Card primitive. It opens instantly by default; pass delay or closeDelay to HoverCardTrigger when a particular preview needs different timing. Its trigger can sit directly in a sentence: hover or focus this inline link to open it.

Tree

Tree contains Folder and File. Folders are open by default; set defaultOpen={false} for a collapsed branch.

• app

  • routes.ts
  • components

    • theme-provider.tsx
• heyo-docs.config.ts

GitHub

GitHub only needs a GitHub URL in href; it fetches the public description, star count, and fork count in the browser. simple is the default one-card presentation. Use inset for a nested repository summary with the statistics below it.

Steps

Steps automatically numbers each Step and keeps the connector centred on the markers, even when a step contains richer content. Pass number to a step when the sequence needs an explicit number.

1. 1

   Install the package

   Add the documentation runtime to your React Router project.

   BunnpmpnpmYarn

   Copy

   bun add @heyo-sh/heyo-docs

2. 2

   Configure your docs

   Create heyo-docs.config.ts and point it at the directory that will hold your MDX pages.

3. 3

   Add a page

   Add an .mdx file to the configured content directory. Built-in components such as Callout, GitHub, and Mermaid are available without imports.

4. 4

   Start the app

   Run the development server and open the generated documentation route.

   bashCopy

   bun run dev

Mermaid

Mermaid renders client-side with the active shadcn color tokens. SVG is the default output; use variant="ascii" for Unicode terminal-style output.

flowchart LR
Content --> Build
Build --> Documentation

flowchart LR
Content --> Build
Build --> Documentation