Magic Docs by Once UI is a simple, modern, MDX-based documentation system built with Next.js. It automatically generates navigation based on the MDX files in the content directory. It comes with a built-in roadmap and changelog.
View the demo here.
1. Clone the repository
git clone https://github.com/once-ui-system/magic-docs.git
Requires Node.js 20.9 or later.
2. Install dependencies
npm install
3. Run dev server
npm run dev
4. Edit config
src/resources/once-ui.config.js
5. Create documentation pages
Add new .mdx files to src/content/
Read the full documentation here.
- All tokens, components & features of Once UI available through NPM
- Automatic open-graph and X image generation with next/og
- Automatic schema and metadata generation based on the content file
- Roadmap: when enabled, task progress is displayed in the homepage
- Changelog: when enabled, last changes are displayed in the homepage
- Responsive layout optimized for all screen sizes
- Timeless design without heavy animations and motion
- Endless customization options through Once UI
- Light and dark mode support with system preference detection
- Organized documentation structure with nested categories
- Searchable content with command palette (Cmd+K / Ctrl+K)
- Automatically generated, responsive sidebar
- Document more than one platform (for example Web and React Native) in one site
- Each platform is its own context: sidebar, search and previous / next links show only its pages
- One switcher at the top of the sidebar for platform and version; it keeps the reader on the same topic
- Configure in
src/resources/platforms.ts; with one platform and one version the switcher hides itself
- One deployed site per version, listed in
src/resources/versions.ts - The switcher at the top of the sidebar shows the platform and the version; with more than one version its menu lists them and keeps the current page
- Beta versions show a prerelease notice on every page and are not indexed by search engines
Magic Docs was built with Once UI for Next.js. It requires Node.js v18.17+.
Lorant One: Threads / LinkedIn
- Join the Design Engineers Club on Discord and share your project with us!
- Deployed your docs? Share it on the Once UI Hub too! We feature our favorite apps on our landing page.
This project is built with Magic Docs. Build your own documentation with Magic Docs for free!
Distributed under the CC BY-NC 4.0 License.
- Attribution is required.
- Commercial usage is not allowed.
- You can extend the license to Dopler CC by purchasing a Once UI Pro license.
See LICENSE.txt for more information.
