Docs Help Center

About This Blueprint

Build a professional documentation and help center site that developers and end-users will actually enjoy reading. Features a sticky sidebar navigation with collapsible sections, syntax-highlighted code blocks, and a version selector dropdown so teams can maintain docs across releases. Polished enough to rival Stripe or Vercel's docs out of the box.

What's Included

• Sticky 260px left sidebar with collapsible section groups, active link highlight, and section badges (e.g. 'New', 'Beta')
• Top navbar with logo, version selector dropdown (v1.0, v2.0, v3.0), GitHub icon link, and search bar with keyboard shortcut hint (⌘K)
• Full-text fuzzy search modal triggered by ⌘K with grouped results (Guides, API, Reference) and keyboard navigation
• Article content area with H1/H2/H3 heading anchors, prose typography, and auto-generated on-page 'On This Page' TOC sticky on the right
• Syntax-highlighted code blocks with language label, line numbers, and one-click copy button using a dark code theme
• Version selector that swaps the entire sidebar navigation tree and content context based on selected doc version
• Callout/admonition components: Info (blue), Warning (amber), Danger (red), Tip (green) with icon and styled border-left
• Prev / Next article footer navigation with card-style links and section label breadcrumb
• Responsive mobile layout: hamburger menu opens sidebar as a full-height drawer with backdrop overlay
• Sample content covering 3 top-level sections (Getting Started, API Reference, Guides) with realistic placeholder pages

Compatible AI Tools

This blueprint has been tested and produces reliable results with: