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 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 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, custom callouts, and interactive examples use standard React. Keep authored components inside the docs project, or install a packaged component library there and import its public exports. Use the hooks you already know and write TypeScript.

The docs site builds as its own package with Ardo's managed React runtime. Reuse a design system through an installed package rather than importing sibling application source. The Agent Instructions explain that boundary.

Plain HTML Pages

Every file in app/routes becomes a page, and every page is prerendered to its own HTML file. Links are ordinary links, so pages load fast from any static host, and the parts that need React hydrate in the browser. There is no client router to configure, and the build checks that every internal link points to a page that exists.

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 { style } from "@vanilla-extract/css"
import { vars } from "ardo/theme"

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

The Ardo CLI includes the Vanilla Extract plugin. Install @vanilla-extract/css in the docs package when authoring .css.ts files with its styling APIs; no extra Vite plugin configuration is required.

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.

How Ardo Compares

Ardo is for React teams that want modern static docs without leaving React or moving their docs into a closed platform. That makes the comparison more specific than "which docs tool is best?" Docusaurus, Starlight, VitePress, Nextra, Fumadocs, and Mintlify are all strong tools. The better question is: where should your docs live, and how much of your existing React code should they reuse?

React reuse in Ardo means components inside the docs project or installed packaged dependencies. Declare design-system packages in the docs package and import their public exports; sibling application source, aliases, and symlinks across that boundary are rejected.

Docusaurus

Docusaurus is the established React documentation framework. It is mature, widely adopted, backed by Meta, and has built-in answers for documentation versioning, localization, blog content, search integrations, and a large plugin ecosystem.

Ardo is built on Vite and Rust-based Markdown and highlighting engines instead of webpack-era architecture, and it prerenders every page to static HTML without a client-side router. It has a smaller configuration surface and a more codebase-native model for teams already using modern React tooling.

Choose Docusaurus if maturity, plugin coverage, and versioned docs matter more than staying close to a Vite and React app stack.

Starlight

Starlight is an excellent Astro-powered docs framework. It is fast, accessible, polished, and especially strong for content-heavy documentation that does not need much app-level interactivity.

Ardo treats React as the native component model. You can use React providers, hooks, and interactive examples in MDX, including an installed design-system package. In Starlight, React runs through Astro islands, which is powerful but creates a different boundary.

Choose Starlight if page weight and Astro's content model are your top priorities.

VitePress

VitePress is the closest comparison: a Vite-powered static documentation framework with a strong default theme and a content-first workflow, for Vue teams.

Ardo brings that simple static-docs shape to React. If your app, examples, and design system are React, Ardo lets you reuse them instead of rewriting them in Vue.

Choose VitePress if your team is already in Vue or your docs do not need React component reuse.

Nextra

Nextra is a strong choice for Next.js teams. It combines MDX with Next.js routing, optimized links and images, search, i18n, and the rendering options you expect from the Next ecosystem.

Ardo is not tied to Next.js. It is a Vite-based React docs stack that writes one static HTML page per route, with no client-side router. That makes it a better fit when your React app is not a Next app, or when you want documentation as a smaller, focused static build.

Choose Nextra if your docs should be a first-class Next.js app.

Fumadocs

Fumadocs is a powerful React documentation toolkit. It is highly composable, supports multiple React frameworks, and offers deep building blocks for teams that want to assemble a custom docs system.

Ardo is intentionally narrower. It gives you a complete static docs product around React, Vite, MDX, and native API documentation, with fewer architectural choices to make.

Choose Fumadocs if you want a docs framework toolkit. Choose Ardo if you want a ready-to-ship static React docs site.

Mintlify

Mintlify is a hosted developer documentation platform. It is strong for commercial API docs, hosted editing workflows, API playgrounds, analytics, and AI-oriented documentation features.

Ardo is open source and codebase-native. Your docs live in your repository, build in your CI, deploy as static files, and render with your React components.

Choose Mintlify if a hosted docs product is the goal. Choose Ardo if source control, self-hosting, and React ownership matter more.

Is Ardo a Good Fit?

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 may not be the right tool if:

• you need mature i18n or versioned docs today; both are still experimental in Ardo;
• you want the lowest possible JavaScript payload and do not need React components;
• your docs should be a hosted SaaS workflow with analytics and API playground management;
• your product stack is Vue, Astro, or Next.js and you want docs to live inside that ecosystem;
• you need an interactive API request console; Ardo's OpenAPI integration generates static reference pages.

Releases lists what is shipped, experimental, and planned.

Versioning and Browser Support

Ardo releases the framework, UI, and runtime as one package. Setup uses versioned Agent Instructions and the tested Basic example. See the Ardo changelog for release history.

Ardo targets modern evergreen browsers supported by React 19 and Vite 8. The default theme uses modern CSS such as OKLCH color and custom properties; teams with legacy browser requirements should test their final docs build against their own support matrix.

Getting Started

Ready to try it? Getting Started has the one-sentence prompt for your coding agent and the manual setup in a few files.