---
canonical_url: "https://docs-template.nuxt.dev"
---
::u-page-hero{className="dark:bg-gradient-to-b,from-neutral-900,to-neutral-950" orientation="horizontal"}
::template{v-slot:top=""}
:hero-background
::

::template{v-slot:title=""}
Ship Beautiful [Documentation]{className="text-primary"}.
::

::template{v-slot:description=""}
Build professional documentation with Nuxt UI's powerful components, enhanced typography, and seamless Nuxt Content integration. The same system trusted by the entire [Nuxt ecosystem](https://nuxt.com).
::

::template{v-slot:links=""}
::u-button{size="xl" to="https://docs-template.nuxt.dev/getting-started" trailing-icon="i-lucide-arrow-right"}
Get started
::

::u-button{size="xl" to="https://github.com/nuxt-ui-templates/docs" color="neutral" target="_blank" variant="outline" icon="i-simple-icons-github"}
Use this template
::
::

::prose-pre{code="export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxt/content',
    'nuxt-og-image',
    'nuxt-llms'
  ],

  css: ['~/assets/css/main.css']
})
" filename="nuxt.config.ts"}
```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxt/content',
    'nuxt-og-image',
    'nuxt-llms'
  ],

  css: ['~/assets/css/main.css']
})
```
::
::

::u-page-section{className="dark:bg-neutral-950"}
::template{v-slot:title=""}
Powered by Nuxt UI components
::

::template{v-slot:links=""}
::u-button{size="lg" to="https://ui.nuxt.com/docs/getting-started/installation/nuxt" color="neutral" target="_blank" variant="subtle" trailingIcon="i-lucide-arrow-right"}
Explore Nuxt UI
::
::

::template{v-slot:features=""}
::u-page-feature{icon="i-lucide-palette"}
::template{v-slot:title=""}
100+ UI Components
::

::template{v-slot:description=""}
Access the complete Nuxt UI component library. From badges to modals, everything styled and accessible out of the box.
::
::

::u-page-feature{icon="i-lucide-type"}
::template{v-slot:title=""}
Beautiful Typography
::

::template{v-slot:description=""}
Pre-styled prose components with perfect visual harmony. No need for @tailwindcss/typography - get precise control over every element.
::
::

::u-page-feature{icon="i-lucide-layers"}
::template{v-slot:title=""}
Rich Prose Components
::

::template{v-slot:description=""}
Accordions, cards, callouts, tabs, steps, code blocks, and more - all provided by Nuxt UI for interactive documentation.
::
::

::u-page-feature{icon="i-lucide-search"}
::template{v-slot:title=""}
Built-in Search
::

::template{v-slot:description=""}
Full-text search with ContentSearch component. No need for Algolia - instant, relevant results with keyboard shortcuts (⌘K).
::
::

::u-page-feature{icon="i-lucide-navigation"}
::template{v-slot:title=""}
Smart Navigation
::

::template{v-slot:description=""}
Auto-generated navigation with ContentNavigation and ContentToc components. Sticky table of contents and prev/next links.
::
::

::u-page-feature{icon="i-lucide-moon"}
::template{v-slot:title=""}
Dark Mode Ready
::

::template{v-slot:description=""}
Automatic theme switching with smooth transitions. Respects system preferences and remembers user choice.
::
::
::
::

::u-page-section{className="dark:bg-neutral-950"}
::template{v-slot:title=""}
Enhanced with Nuxt Content
::

::template{v-slot:links=""}
::u-button{size="lg" to="https://content.nuxt.com/docs/getting-started/installation" color="neutral" target="_blank" variant="subtle" trailingIcon="i-lucide-arrow-right"}
Explore Nuxt Content
::
::

::template{v-slot:features=""}
::u-page-feature{icon="i-simple-icons-markdown"}
::template{v-slot:title=""}
MDC Enhanced Markdown
::

::template{v-slot:description=""}
Write in Markdown while embedding Vue components. Seamlessly integrate interactive elements in your content.
::
::

::u-page-feature{icon="i-lucide-file-text"}
::template{v-slot:title=""}
File-based Routing
::

::template{v-slot:description=""}
Organize content in folders and files. Your documentation structure automatically becomes your navigation.
::
::

::u-page-feature{icon="i-lucide-code"}
::template{v-slot:title=""}
Syntax Highlighting
::

::template{v-slot:description=""}
Beautiful code blocks with language detection, line numbers, and copy buttons. Support for 100+ languages.
::
::

::u-page-feature{icon="i-lucide-database"}
::template{v-slot:title=""}
Content Database
::

::template{v-slot:description=""}
Query your content with a MongoDB-like API. Filter, sort, and search through your documentation programmatically.
::
::

::u-page-feature{icon="i-lucide-file-code"}
::template{v-slot:title=""}
Frontmatter Support
::

::template{v-slot:description=""}
Add metadata to your content files. Define SEO tags, navigation properties, and custom fields.
::
::

::u-page-feature{icon="i-lucide-git-branch"}
::template{v-slot:title=""}
Version Control
::

::template{v-slot:description=""}
Content lives in your repository. Branch, review, and deploy documentation alongside your code.
::
::
::
::

::u-page-section{className="dark:bg-gradient-to-b,from-neutral-950,to-neutral-900"}
::u-page-c-t-a{:links="[{"label":"Start building","to":"/getting-started","trailingIcon":"i-lucide-arrow-right"},{"label":"View on GitHub","to":"https://github.com/nuxt-ui-templates/docs","target":"_blank","variant":"subtle","icon":"i-simple-icons-github"}]" className="dark:bg-neutral-950" description="Join thousands of developers building with Nuxt and Nuxt UI. Get this template and start shipping today." title="Ready to build an amazing documentation?"}
:stars-bg
::
::

## Resources for Agents

- [API catalog: every service document this site publishes](https://docs-template.nuxt.dev/.well-known/api-catalog)
- [Sitemap (Markdown): every page on the site](https://docs-template.nuxt.dev/sitemap.md)
- [llms.txt: index of the documentation for LLMs](https://docs-template.nuxt.dev/llms.txt)
- [llms-full.txt: the full documentation as a single file](https://docs-template.nuxt.dev/llms-full.txt)


## Sitemap

See the full [sitemap](https://docs-template.nuxt.dev/sitemap.md) for all pages.