Ui

Components

Additional components to improve your docs

Overview

Additional components that you can use:

Auto Type Table

Auto-generated type table

Code Block

Displaying Shiki highlighted code blocks

Code Block (Dynamic)

A codeblock that also highlights code

GitHub Info

Display your GitHub repository information

Zoomable Image

Allow zoom-in images in your documentation

Tabs

A Tabs component built with Radix UI, with additional features such as persistent and shared value.

MDX Components

The default MDX components include Cards, Callouts, Code Blocks and Headings.

import defaultMdxComponents from '@hanzo/docs-ui/mdx';

Relative Link

Server Component only.

To support links with relative file path in href, override the default a component with:

import { createRelativeLink } from '@hanzo/docs-ui/mdx';
import { source } from '@/lib/source';
import { getMDXComponents } from '@/components/mdx';

const page = source.getPage(['...']);

return (
  <MdxContent
    components={getMDXComponents({
      // override the `a` tag
      a: createRelativeLink(source, page),
    })}
  />
);

[My Link](./file.mdx)

Example: ../../(integrations)/feedback.mdx

How is this guide?

Last updated on

On this page