User Guide

Installation

Initialize a config for CLI:

npx @hanzo/docs-cli

You can change the output paths of components in the config.

Components

Select and install components.

npx @hanzo/docs-cli add

You can pass component names directly.

npx @hanzo/docs-cli add banner files

How the magic works?

The CLI fetches the latest version of component from the GitHub repository of Hanzo Docs. When you install a component, it is guaranteed to be up-to-date.

In addition, it also transforms import paths. Make sure to use the latest version of CLI

This is highly inspired by Shadcn UI.

Customise

A simple way to customise Hanzo Docs layouts.

npx @hanzo/docs-cli customise

Tree

Generate files tree for Hanzo Docs UI Files component, using the tree command from your terminal.

npx @hanzo/docs-cli tree ./my-dir ./output.tsx

You can output MDX files too:

npx @hanzo/docs-cli tree ./my-dir ./output.mdx

See help for further details:

npx @hanzo/docs-cli tree -h

Example Output

output.tsx

import { File, Folder, Files } from '@hanzo/docs/ui/components/files';

export default (
  <Files>
    <Folder name="app">
      <File name="layout.tsx" />
      <File name="page.tsx" />
      <File name="global.css" />
    </Folder>
    <Folder name="components">
      <File name="button.tsx" />
      <File name="tabs.tsx" />
      <File name="dialog.tsx" />
    </Folder>
    <File name="package.json" />
  </Files>
);