chakra-docsv0.3.0

Component showcase

Explore working examples of the primitives powering this documentation site.

This site uses the same native layout, search, code blocks, and page actions available to your application. Follow the examples below to see each feature in context.

Note

Everything starts with your Chakra theme. Override recipes globally, or use slot props for a single instance.

tsx
<DocsLayout nav={nav} page={page} sidebarCollapsible>
  <DocsArticle page={page}>
    <MarkdownContent source={page.body} />
  </DocsArticle>
</DocsLayout>
Get started

Install the packages and compose your first docs layout.

Composition

Build a docs shell that fits your application.

Components

Explore page actions, tables, callouts, and navigation.

Search

Add keyboard-accessible search with server-side ranking.

Machine-readable docs

Expose manifests, feeds, and documentation for agents.

Postkit integration

Use Postkit for rich Markdown without replacing your docs shell.

© 2026 — Ryan Hefner

MIT license

By

Commune Software