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
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
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.
