# Quickstart

Install Dockit, wire its renderer and page discovery, then build a static documentation site. Dockit packages the MDX compiler, Tailwind plugin, and syntax highlighting; React and Vike are installed alongside it as peers.

## Requirements

- **Node 20+** (Vite 7 requires 20.19 or 22.12+)
- **pnpm** (any recent version; the DreamLake workspaces pin `pnpm@10.33.0`)

## Install

```bash
pnpm add @dreamlake/dockit
pnpm add react@latest react-dom@latest tailwindcss vike@^0.4.260 vike-react @mdx-js/react
pnpm add -D vite typescript pagefind @types/react@latest @types/react-dom@latest
```

Peer versions dockit expects (org convention: sites track `react@latest`;
the peer ranges are floors, not pins):

| Peer | Range |
| --- | --- |
| `react` / `react-dom` | `>=19.0.0` — use `latest` |
| `tailwindcss` | `^4.0.0` — **install it directly** (`pnpm add tailwindcss`); peer auto-install does not happen in Netlify's CI pnpm setup (verified empirically) |
| `vike` | `^0.4.210` declared — **use `^0.4.260`**, see below |
| `vike-react` | `^0.5.0` |
| `@mdx-js/react` | `>=3.0.0` |
| `vite` | `>=6.0.0` (optional — only needed for the `/vite` plugin factory) |

> **Warning:** Dockit nests Vike's plugin inside the `dockit()` plugin array, and the
> `vike prerender` CLI could not detect a nested plugin before 0.4.260
> (verified: 0.4.259 fails, 0.4.260 passes). Dev and `vite build` work on
> older versions — the failure only shows up at prerender time, so pin the
> floor now rather than debugging it at deploy time.

Everything else — `@mdx-js/rollup`, `@tailwindcss/vite`,
`@vitejs/plugin-react`, shiki and the remark/rehype plugins — comes in
as dockit's own dependencies. You never install them directly, and the
`dockit()` plugin factory wires them all. (`tailwindcss` is declared as a
peer AND belongs in your own dependencies — strict CI installs, Netlify
included, do not auto-install peers, and the shell's classes need it
resolvable at your site root.) If you are porting a site off
the old template, those are exactly the deps you get to delete — see
[Migrate an existing site](/get-started/migration.md).

> **Note:** Inside a pnpm workspace, depend on the library with
> `"@dreamlake/dockit": "workspace:*"` — this site does exactly that.
> See the [Netlify monorepo setup](/guides/releases.md) for the deploy side.

<span id="verify" />

## Verify installation

```bash
pnpm exec vite --version   # ≥ 7
pnpm exec vike --version   # ≥ 0.4.260
node -e "import('@dreamlake/dockit').then(m => console.log(Object.keys(m).length, 'exports'))"
```

## Site structure

Create the following files:

```text
my-docs/
  vite.config.ts        # plugins: [...dockit()]
  site.config.ts        # initDocs(...) — the one place you configure
  renderer/
    +config.ts          # re-export dockit's Vike config
    +onRenderHtml.tsx   # thin wrapper over @dreamlake/dockit/server
    +onRenderClient.tsx # thin wrapper over @dreamlake/dockit/client
  styles/app.css        # tailwind + dockit styles
  pages/
    index/+Page.mdx     # your first page
```

Already have a docs site on the hand-rolled DreamLake template? Skip
this page and follow [Migrate an existing site](/get-started/migration.md)
instead — it maps every old file onto the structure below.

## 1. Vite config

The `dockit()` factory returns the entire plugin stack — Tailwind v4,
MDX with frontmatter + GFM + shiki dual-theme highlighting, the
`?raw`-MDX loader, React, and Vike:

```ts file="vite.config.ts"

export default defineConfig({
  plugins: [...dockit()],
  server: { port: 3020 },
})
```

## 2. Site config

`initDocs` populates the shell's singletons: branding, the page list
(from an eager glob), the raw sources for search, sidebar section
order, and topbar tabs. See [SiteConfig](/reference/config.md) for every field,
and the [site config guide](/guides/site-config.md) for how the pieces
fit together.

```ts file="site.config.ts"

initDocs({
  site: {
    brand: 'MyProject',
    subtitle: 'docs',
    repoUrl: 'https://github.com/me/my-project',
    docsRepoUrl: 'https://github.com/me/my-docs',
    docsBranch: 'main',
    breadcrumbRoot: 'MyProject',
    url: 'https://docs.my-project.dev',
    docsPagesPath: 'pages',
  },
  pageMetadata: import.meta.glob('./pages/**/+Page.mdx', { eager: true, query: '?frontmatter', import: 'default' }),
  rawPages: import.meta.env.DEV ? import.meta.glob<string>('./pages/**/+Page.mdx', {
    eager: true, query: '?raw', import: 'default',
  }) : undefined,
  sectionOrder: ['Getting started', 'Guides', 'Reference'],
  tabs: [], // or a TabDef[] — see /components/topbar
})
```

## 3. Renderer wrappers

Vike discovers hooks by their `+`-prefixed filenames, which cannot live
inside a published package — so your site carries three one-liners:

```ts file="renderer/+config.ts"
export { default } from '@dreamlake/dockit/vike'
```

```tsx file="renderer/+onRenderHtml.tsx"
// site.config MUST come first — it runs initDocs before anything renders.

```

```tsx file="renderer/+onRenderClient.tsx"

```

> **Warning:** The `site.config` import must be the first import in both renderer
> entries. It runs `initDocs` as a side effect; if the shell renders
> first, the sidebar and search see empty data.

## 4. Styles

```css file="styles/app.css"
@import "tailwindcss";
@import "@dreamlake/dockit/styles.css";

/* Point Tailwind at your own class usage: */
@source "../pages";
@source "../renderer";
```

Dockit's stylesheet carries the theme tokens, dark-mode overrides, and
its own `@source` directive so Tailwind also scans the library's
compiled components. Details in [Theming](/guides/theming.md).

## 5. First page

```mdx file="pages/index/+Page.mdx"
---
title: Introduction
section: Getting started
order: 0
---

# Hello

Welcome to the docs.
```

## Run it

```bash
pnpm exec vite          # dev server
pnpm exec vite build && pnpm exec vike prerender
pnpm exec pagefind --site dist/client   # build the search index
```

That is the whole site. Next, read the
[authoring guide](/guides/authoring.md) that make the sidebar build
itself.

## Deploying your site

The build is fully static, so any static host works: after
`pnpm build`, publish the `docs/dist/client` directory (or your docs
package's `dist/client`). On Netlify, point the site's publish
directory there and enable branch deploys — every pushed branch then
serves a snapshot at `<branch>--<site>.netlify.app`, which is what
powers versioned docs URLs.

For versioned releases, the package ships a copy-in release kit at
`node_modules/@dreamlake/dockit/templates/` — `set-version.mjs`,
`version-branch.sh`, `versions.example.json`, and
`netlify.example.toml`. Copy them in, fill the marked `EDIT ME` block
with your Netlify site name, and follow
[Releases & versioning](/guides/releases.md) for the full flow.

## Orient your agents

Use the [agent setup fragment](/guides/llms.md#orient-your-agents) to describe your docs layout, authoring conventions, and generated skill to coding agents.