shadcn-docs-nuxt is an open-source documentation website template for Nuxt that pairs Nuxt Content with shadcn-vue components to deliver a beautiful, customizable docs site generated from Markdown files.
What is shadcn-docs-nuxt?
shadcn-docs-nuxt is a documentation website template built on a Nuxt application with Nuxt Content as the content layer. It takes Markdown files (and frontmatter) placed in a content directory and produces a styled documentation site with navigation, search, and component demos. The template is authored by ZTL-UwU, released under the MIT license, and is available on npm as the shadcn-docs-nuxt package, with a live demo and documentation at shadcn-docs-nuxt.vercel.app.
Key Features
- Built on Nuxt Content — Uses the content/ directory with Markdown and frontmatter; content is rendered automatically, and Vue developers can extend it with .vue components.
- shadcn-vue components — Everything is built with shadcn-vue, the Vue port of shadcn-ui, giving copy-paste access to source components for direct customization.
- Inspired by existing docs designs — The README credits shadcn-ui, Docus, and Nuxt UI Pro Docs as design/component influences.
- MIT licensed — The template is free to use and modify, including for commercial projects, with attribution not required.
- Starter template quick start — Scaffold a new project with
npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter, then runnpm run dev. - Active community usage — Used by projects like unjs/magic-regexp, nuxt-monaco-editor, nuxt-umami, and ai-elements-vue, per the README's "Who's Using" list.
- Live demo and documentation — A public demo site shows the template's components and layout, useful for evaluating before installing.
Who is it for?
shadcn-docs-nuxt is for open-source maintainers, Nuxt developers, technical writers, and teams that need a polished documentation hub without building one from scratch. Open-source maintainers can publish project docs from a single Markdown directory; Nuxt developers get a template that fits their existing Vue and Tailwind skills; technical writers can focus on writing content while the template handles navigation and layout.
What can you do with shadcn-docs-nuxt?
- Open-source maintainers: Create a documentation site for a library or tool, like unjs/magic-regexp does, using Markdown files and a predefined layout.
- Nuxt developers: Build a custom docs portal or API reference with the component-level control that shadcn-vue provides.
- Teams and startups: Launch a knowledge base or product guide quickly, with a design familiar to shadcn-ui users.
- Content-focused editors: Write in Markdown and get a styled site with code highlighting and responsive navigation out of the box.
How does shadcn-docs-nuxt work?
Start by creating a project with the official starter template: run npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter, then cd project-name, then npm run dev. The dev server loads Markdown content from the content directory and renders it through Nuxt Content and shadcn-vue components. For contributors, the repository workflow uses pnpm install, pnpm run dev, and checks with pnpm run lint:fix and pnpm run typecheck before committing.
Alternatives
- Docus — Another Nuxt Content documentation theme, which was an inspiration for shadcn-docs-nuxt; it also builds docs sites from Markdown but uses different UI styling.
- Nuxt UI Pro Docs — A commercial documentation template from the Nuxt team, referenced as an inspiration, with paid license and support.
FAQ
Is shadcn-docs-nuxt free?
Yes. The template is open source under the MIT license, which allows free use, modification, and distribution, including for commercial projects. The author also accepts optional donations via Ko-fi.
How do I get started with shadcn-docs-nuxt?
Use the starter template: npx nuxi@latest init -t github:ZTL-UwU/shadcn-docs-nuxt-starter. Then navigate into the project directory and run npm run dev to start the development server.
Can I customize the components?
Yes. Because shadcn-docs-nuxt is built on shadcn-vue, the component source is available for you to copy and edit directly, similar to how shadcn-ui works. You can adjust styles, layout, and component behavior to fit your brand.
Does it work with plain Markdown?
Yes. The template uses Nuxt Content, which reads Markdown and frontmatter from a content directory. You can also mix in Vue components inside your Markdown for interactive documentation.
Who maintains shadcn-docs-nuxt?
The project is created and maintained by ZTL-UwU, with a community Discord server, a live demo at shadcn-docs-nuxt.vercel.app, and contributions accepted via GitHub issues and pull requests.
