What is Ardo?

You know React. You have components, providers, styling conventions, examples, and TypeScript types that already explain how your product works. Then documentation starts, and too often the docs stack asks you to learn a different component model before you can ship a useful guide.

Ardo exists so you don't have to start over.

It is a static documentation framework built on React, React Router 7, and Vite. It gives React teams a simple docs workflow without a closed platform, a second UI framework, or a docs-only component model.

The Problem with Documentation Frameworks

Most documentation tools ask you to leave your stack at the door. They come with their own component systems, their own conventions, and their own learning curves. That's fine if you're starting from scratch — but if you already live in the React ecosystem, it means:

• Rewriting components you already have
• Learning patterns that don't transfer to your other work
• Maintaining two mental models for the same kind of UI

Ardo takes a different approach. Instead of inventing a new system, it builds on top of what the React ecosystem already provides.

What Makes Ardo Different

Your React Knowledge, Applied Directly

Every component in Ardo is a React component. Your documentation layout, your custom callouts, your interactive API playgrounds — they're all standard React. Import any component from npm. Use the hooks you already know. Write TypeScript the way you always do.

There's nothing new to learn before you're productive.

Built on React Router 7

Ardo doesn't reinvent routing. It uses React Router 7 — the same router that powers production React apps. This gives you file-based routing, static pre-rendering for fast page loads, type-safe navigation, and all the patterns from React 19.

Powered by Vite

Vite keeps the local editing loop fast, production builds optimized, and the plugin ecosystem open. Ardo adds documentation-specific processing on top of that instead of hiding Vite behind a separate platform.

What You Get

Markdown + React Components

Write documentation in Markdown, drop in React components where you need them:

# My Documentation

Regular markdown content...

<CustomComponent prop="value" />

More markdown content...

No special syntax. No wrappers. Just MDX, the way it was designed to work.

A Polished Default Theme

Ardo ships with a complete theme so you can focus on content, not design:

• Responsive layout that works on any device
• Dark and light mode with automatic detection
• Full-text search across all your pages
• Automatic table of contents
• Syntax highlighting with line numbers and highlights

Type-Safe Styling with Vanilla Extract

Ardo's UI is built with Vanilla Extract — a zero-runtime CSS-in-TypeScript solution. Every design token (colors, spacing, radii, transitions) is available as a type-safe import:

import { vars } from "ardo/theme"

// Full autocomplete for all design tokens
const myStyle = style({
  color: vars.color.brand,
  borderRadius: vars.radius.base,
})

The ardo() Vite plugin automatically includes the Vanilla Extract plugin, so you can write .css.ts files in your own project without any extra setup.

Fully Customizable

When you're ready to make it yours, everything is accessible. Theme colors, layout components, Markdown processing, and the build pipeline are standard React and Vite pieces, so customization works the way your team already works.

Where Ardo Fits

Ardo is strongest when documentation should live next to a React codebase:

• component libraries that need live examples and API reference pages;
• product teams with an existing React design system;
• open-source projects that want static docs without a hosted platform;
• teams that like VitePress-style simplicity but do not want Vue or Astro as their docs runtime.

It is not trying to replace every docs tool. If you need mature versioning/i18n today, Docusaurus may fit better. If your docs are mostly prose and the smallest possible payload matters most, Starlight or VitePress may be better. If you want hosted analytics, AI features, and API playground management, Mintlify is a different category.

Getting Started

Ready to try it? The Getting Started guide walks you through setup in a few minutes.