Introduction

Welcome to the documentation template — a comprehensive, production-ready documentation site built with the latest web technologies. This template demonstrates how to create professional documentation that rivals the official docs of Vercel, Next.js, and other modern frameworks.

Built for the modern web

This template uses Next.js 16, TypeScript 5.9, Streamdown for markdown rendering, and AI Elements from Vercel for AI-native UI components.

Key features

  • Streamdown integration — Real-time streaming markdown rendering with all plugins (code highlighting, mathematics, diagrams, CJK support)
  • AI Elements — Pre-built, composable components for building AI-native interfaces
  • Full navigation — Sidebar, breadcrumbs, table of contents, page navigation, and keyboard-driven search
  • Dark mode — Automatic theme detection with manual toggle
  • Responsive design — Mobile-first layout with slide-out navigation
  • Accessible — Semantic HTML, ARIA labels, and keyboard navigation throughout

Quick start

1

Clone the template

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

Install dependencies

bash
cd my-docs && bun install
3

Start the dev server

bash
bun run dev

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

Tech stack

TechnologyVersionPurpose
Next.js16.1React framework
TypeScript5.9Type safety
React19.2UI library
Tailwind CSS4.xStyling
shadcn/uiLatestComponent library
StreamdownLatestMarkdown rendering
AI ElementsLatestAI interface components

Explore

Installation

Step-by-step guide to setting up the documentation template in your project.

Learn more

Components

Browse the available documentation components including callouts, code blocks, and tabs.

Learn more

Streamdown

Learn about streaming markdown rendering with syntax highlighting and maths support.

Learn more

AI Elements

Discover pre-built components for building AI-native documentation experiences.

Learn more