Installation

This guide walks you through setting up docco — clone the template, install dependencies, and start writing your documentation in minutes.

Prerequisites

Bun (latest)
Access to the hongymagic/docco GitHub repository
Basic familiarity with Next.js and React

Installation

Clone the repository

bash

git clone https://github.com/hongymagic/docco.git my-docs

This creates a my-docs directory with the full template, including all components, layouts, styles, and configuration.

Install dependencies

bash

cd my-docs
bun install

Start the development server

bash

bun run dev

Open http://localhost:3000 to view your documentation site.

You're up and running!

Your documentation site is ready. You should see the docco landing page and the full documentation at /docs.

Customisation

Once you have the template running, you will want to make it your own. Here are the key files to update:

File	What to change
`lib/docs-config.ts`	Sidebar navigation structure — add, remove, or reorder pages
`app/page.tsx`	Landing page — update your site name, tagline, and feature list
`app/docs/`	Documentation pages — replace the sample content with your own
`app/globals.css`	Design tokens — customise colours, fonts, and spacing
`app/layout.tsx`	Root layout — update the site title and metadata
`package.json`	Project name and description

See the Project Structure page for a full breakdown of the template's directory layout.

What's included

The template ships with all dependencies pre-configured. Here is an overview of the key libraries and how they are set up.

Streamdown plugins

Streamdown uses a plugin architecture for extending its capabilities. The following plugins are already installed and configured:

Plugin	Package	Purpose
Code	`@streamdown/code`	Syntax highlighting via Shiki
Math	`@streamdown/math`	LaTeX rendering via KaTeX
Mermaid	`@streamdown/mermaid`	Diagram rendering
CJK	`@streamdown/cjk`	CJK language support

Streamdown is configured in the markdown renderer component:

components/docs/markdown-renderer.tsx

import { Streamdown } from "streamdown"
import { code } from "@streamdown/code"
import { math } from "@streamdown/math"
import "katex/dist/katex.min.css"

export function MarkdownRenderer({ content }: { content: string }) {
  return (
    <Streamdown plugins={{ code, math }}>
      {content}
    </Streamdown>
  )
}

AI Elements

AI Elements provides pre-built components for AI applications. These are already included in the template. To add more components, use the CLI:

bash

bunx ai-elements@latest add conversation message prompt-input

shadcn/ui foundation

AI Elements are built on shadcn/ui conventions. Both shadcn/ui and AI Elements are pre-configured in this template.

Configuration

The template uses Next.js 16 with Turbopack enabled by default. The included configuration is:

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    unoptimized: true,
  },
};

export default nextConfig;

You can extend this configuration as needed. Refer to the Next.js configuration documentation for all available options.