ardo

React-first Static Documentation Framework built on React Router 7.

Quick Start

Scaffold a new project with the CLI:

pnpm create ardo@latest my-docs
cd my-docs
pnpm install
pnpm dev

Manual Installation

pnpm add ardo react react-dom react-router
pnpm add -D typescript vite

Usage

Vite Configuration

Create a vite.config.ts with your Ardo configuration:

import { defineConfig } from "vite"
import { ardo } from "ardo/vite"

export default defineConfig({
  plugins: [
    ardo({
      title: "My Documentation",
      description: "Built with Ardo",
    }),
  ],
})

The ardo() plugin includes React Router, MDX processing, and all necessary configuration. Navigation, sidebar, footer, and other UI configuration is done via JSX props in your root.tsx.

Runtime Hooks

Access configuration and page data in your components:

import { useArdoConfig, useArdoSidebar, useArdoPageData, useArdoTOC } from "ardo/runtime"

function MyComponent() {
  const config = useArdoConfig()
  const sidebar = useArdoSidebar()
  const page = useArdoPageData()
  const toc = useArdoTOC()

  return <h1>{config.title}</h1>
}

Theme Components

Use pre-built components for your documentation:

import { ArdoLayout, ArdoHeader, ArdoSidebar, ArdoFooter } from "ardo/ui"

function App() {
  return (
    <ArdoLayout header={<ArdoHeader />} sidebar={<ArdoSidebar />} footer={<ArdoFooter />}>
      <YourContent />
    </ArdoLayout>
  )
}

Exports

| Export | Description | | -------------------- | ------------------------- | | ardo/vite | Vite plugin (ardo) | | ardo/runtime | React hooks and providers | | ardo/ui | Pre-built UI components | | ardo/ui/styles.css | Default theme styles |

Documentation

Full documentation available at ardo-docs.dev

LLM-optimized documentation: llms-full.txt

License

MIT © Sebastian Software GmbH