Project Structure

This page provides an overview of the folder and file structure of the documentation template. Understanding this layout will help you navigate and extend the template efficiently.

Overview

Directory tree

my-docs/
├── app/
│   ├── docs/
│   │   ├── layout.tsx          # Docs layout with sidebar
│   │   ├── page.tsx            # Introduction page
│   │   ├── installation/
│   │   │   └── page.tsx
│   │   ├── components/
│   │   │   ├── markdown/
│   │   │   │   └── page.tsx
│   │   │   └── code-blocks/
│   │   │       └── page.tsx
│   │   ├── streamdown/
│   │   │   ├── page.tsx
│   │   │   └── plugins/
│   │   │       └── page.tsx
│   │   └── ai-elements/
│   │       └── page.tsx
│   ├── layout.tsx              # Root layout with theme
│   ├── page.tsx                # Landing page
│   └── globals.css             # Design tokens
├── components/
│   ├── docs/                   # Documentation components
│   │   ├── header.tsx
│   │   ├── sidebar-nav.tsx
│   │   ├── table-of-contents.tsx
│   │   ├── callout.tsx
│   │   ├── code-block.tsx
│   │   ├── markdown-renderer.tsx
│   │   └── ...
│   └── ui/                     # shadcn/ui components
│       ├── button.tsx
│       ├── dialog.tsx
│       └── ...
├── lib/
│   ├── docs-config.ts          # Navigation configuration
│   └── utils.ts                # Utility functions
└── package.json

App directory

The app/ directory follows the Next.js App Router convention. Each documentation page is a page.tsx file within a folder that maps to its URL path.

File	Purpose
`app/layout.tsx`	Root layout with theme provider and fonts
`app/page.tsx`	Landing page / home
`app/docs/layout.tsx`	Documentation layout with sidebar navigation
`app/globals.css`	Design tokens, prose styles, and base CSS

Components

Documentation-specific components live in components/docs/, while shadcn/ui primitives remain in components/ui/. This separation keeps the codebase organised and makes it straightforward to swap out or extend individual parts.

All documentation components are designed to be composable. You can mix and match them freely to create custom page layouts.

Conventions

One page per route — Each page lives in its own folder with a page.tsx file
Collocated metadata — Each page exports its own metadata for SEO
Shared layout — The docs layout provides sidebar navigation for all documentation pages
Design tokens — All colours use CSS custom properties defined in globals.css