A high-performance, beautiful documentation starter powered by the latest web technologies.
- Blazing Fast Performance: Powered by Vite 8 for near-instant hot module replacement and lightning-fast builds.
- Modern Styling: Built with Tailwind CSS 4, utilizing the new CSS-first configuration and OKLCH colors.
- Native MDX Support: Write documentation with the power of React components directly in your Markdown.
- Beautiful Typography: Featuring Inter Variable for body text and Geist Mono for technical labels and code.
- Dark Mode: Intelligent theme toggle with system preference detection and local storage persistence.
- Rich Documentation Components:
Steps&Step: For building beautiful ordered guides.Callout: For highlighting important information with specific types (success, warning, error).CopyButton: One-click copying for all code blocks.- GFM Alerts: Native support for GitHub-style alerts (
[!NOTE],[!TIP], etc.).
- Enhanced Images: Automated click-to-zoom preview for all images in your documentation.
- Type Safe: Fully written in TypeScript for the best developer experience.
- Node.js: 22 or higher
- pnpm: 10 or higher
-
Clone the repository:
git clone https://github.com/area44/vite-monopage.git cd vite-monopage -
Install dependencies:
pnpm install
-
Start development server:
pnpm dev
-
Build for production:
pnpm build
Your main documentation content lives in src/pages/index.mdx. Simply edit this file to update your site. The page title and description are managed via frontmatter.
You can create new React components in src/components/ui and register them in src/components/mdx-components.tsx. Once registered, they are available to use directly in your MDX files.
The visual identity (colors, fonts, radius) is defined in src/styles/index.css using Tailwind 4's @theme block.
| Path | Description |
|---|---|
src/app/ |
Core application logic and main app.tsx layout. |
src/pages/ |
MDX-based documentation content. |
src/components/ |
Reusable UI and MDX-specific components. |
src/styles/ |
Global CSS and Tailwind theme configuration. |
public/ |
Static assets like logos and icons. |
Vite Monopage is inspired by the aesthetics of Mintlify and Shadcn UI. It prioritizes:
- Clarity: Generous whitespace and a clean, single-page layout.
- Readability: High-quality typography and subtle border-driven depth.
- Simplicity: A low-config, "just-works" approach to technical documentation.
Distributed under the MIT License. See LICENSE for more information.