# Docs Article

> A documentation article with a navbar, breadcrumb, long-form body with code blocks, a scroll-spy table of contents and comments.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/templates/docs-article
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/docs-article.json
```

Adds the page at `app/docs-article/page.tsx` together with the components below. Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Components

- [Navbar](https://chromotion.dev/r/navbar.md): `@/components/navbar`
- [Breadcrumb](https://chromotion.dev/r/breadcrumb.md): `@/components/breadcrumb`
- [Table of Contents](https://chromotion.dev/r/table-of-contents.md): `@/components/table-of-contents`
- [Comment Thread](https://chromotion.dev/r/comment-thread.md): `@/components/comment-thread`

## Dependencies

```bash
npm install lucide-react
```

## Source

```tsx title="app/docs-article/page.tsx"
import { Hexagon, House } from "lucide-react"

import { Breadcrumb } from "@/components/breadcrumb"
import { CommentThread, type Comment } from "@/components/comment-thread"
import { Navbar } from "@/components/navbar"
import { TableOfContents } from "@/components/table-of-contents"

const headings = [
  { id: "overview", label: "Overview" },
  { id: "install", label: "Installation" },
  { id: "config", label: "Configuration" },
  { id: "environments", label: "Environment variables", level: 2 as const },
  { id: "headers", label: "Custom headers", level: 2 as const },
  { id: "deploy", label: "Deploying" },
  { id: "discussion", label: "Discussion" },
]

const comments: Comment[] = [
  {
    id: "c1",
    author: "Maya Chen",
    time: "2h ago",
    likes: 7,
    body: "The environment variable section saved me an afternoon. Could we get an example for monorepos?",
    replies: [{ id: "c1-1", author: "Docs team", time: "1h ago", likes: 2, body: "Great call. A monorepo guide is on the way this week." }],
  },
  { id: "c2", author: "Jonas Weber", time: "yesterday", likes: 3, body: "Header rules also accept regular expressions, which is not mentioned here." },
]

function Code({ children }: { children: string }) {
  return (
    <pre className="overflow-x-auto rounded-xl border bg-muted/50 p-4 text-sm leading-relaxed">
      <code>{children}</code>
    </pre>
  )
}

export default function DocsArticle() {
  return (
    <div className="min-h-svh bg-background text-foreground">
      <Navbar
        brand={
          <>
            <Hexagon className="size-5 fill-primary text-primary" /> Hexa Docs
          </>
        }
        links={[
          { label: "Guides", href: "#", active: true },
          { label: "API", href: "#" },
          { label: "Examples", href: "#" },
          { label: "Changelog", href: "#" },
        ]}
        primaryAction={{ label: "Dashboard", href: "#" }}
      />

      <div className="mx-auto grid max-w-6xl gap-10 px-6 py-10 lg:grid-cols-[minmax(0,1fr)_220px]">
        <article className="min-w-0">
          <Breadcrumb
            items={[
              { label: "Docs", href: "#", icon: <House className="size-3.5" /> },
              { label: "Guides", href: "#" },
              { label: "Deploying your app" },
            ]}
          />
          <h1 className="mt-6 text-4xl font-semibold tracking-tight text-balance">Deploying your app</h1>
          <p className="mt-3 text-lg text-pretty text-muted-foreground">
            Connect a repository, configure your build and ship to the edge. Updated Nov 5, 2026 · 6 min read.
          </p>

          <div className="mt-10 flex flex-col gap-5 leading-7 text-pretty">
            <h2 id="overview" className="scroll-mt-20 text-2xl font-semibold tracking-tight">Overview</h2>
            <p>
              Every push to your default branch builds and deploys automatically. Pull requests get their own preview URL so you
              can review changes before they merge.
            </p>

            <h2 id="install" className="mt-6 scroll-mt-20 text-2xl font-semibold tracking-tight">Installation</h2>
            <p>Install the CLI and sign in. It works with any framework that can produce a static or server build.</p>
            <Code>{`npm install --global hexa
hexa login
hexa init`}</Code>

            <h2 id="config" className="mt-6 scroll-mt-20 text-2xl font-semibold tracking-tight">Configuration</h2>
            <p>
              Hexa reads <code className="rounded bg-muted px-1.5 py-0.5 text-sm">hexa.json</code> from the project root. Every field is
              optional; sensible defaults are detected from your framework.
            </p>
            <Code>{`{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "regions": ["iad1", "fra1"]
}`}</Code>

            <h3 id="environments" className="mt-2 scroll-mt-20 text-xl font-semibold tracking-tight">Environment variables</h3>
            <p>
              Variables are scoped to production, preview or development. Values are encrypted at rest and only exposed to the
              build and runtime of the scope they belong to.
            </p>

            <h3 id="headers" className="mt-2 scroll-mt-20 text-xl font-semibold tracking-tight">Custom headers</h3>
            <p>Add response headers per path with a pattern, a header name and a value. Rules are applied in the order they are listed.</p>

            <h2 id="deploy" className="mt-6 scroll-mt-20 text-2xl font-semibold tracking-tight">Deploying</h2>
            <p>Run a deploy from your terminal or let your git provider trigger it. Roll back to any previous deployment with one click.</p>
            <Code>{`hexa deploy --prod`}</Code>
          </div>

          <section id="discussion" className="mt-14 scroll-mt-20 border-t pt-10">
            <h2 className="mb-6 text-2xl font-semibold tracking-tight">Discussion</h2>
            <CommentThread comments={comments} currentUser="You" />
          </section>
        </article>

        <aside className="hidden lg:block">
          <TableOfContents headings={headings} className="sticky top-20" />
        </aside>
      </div>
    </div>
  )
}
```