shadcn-docs-nuxt

shadcn-docs-nuxt is a Nuxt-based documentation template built using Nuxt Content and shadcn-vue. It serves as a free, open-source alternative to premium documentation solutions like Docus and Nuxt UI Pro Docs.

Key Features

• Open Source: Completely free to use and customize.
• Highly Customizable: Full control over configuration.
• Rich Component Library: Includes a variety of specialized components for documentation (see /components/prose).
• Mobile Support: Fully responsive design.
• Indexed Search: Powered by Nuxt Content for efficient content discovery.
• Compatibility: Compatible with components from Docus, Nuxt UI Pro Docs, and undocs.

shadcn-docs-nuxt is a documentation template for Nuxt built using Nuxt Content and shadcn-vue. It serves as a free, open-source alternative to premium documentation solutions like Docus or Nuxt UI Pro Docs.

Key Features

• Open Source: Free to use and customize.
• Customizable: Fully configurable via the configuration API.
• Rich Component Library: Includes specialized components for prose and documentation workflows.
• Mobile Support: Responsive design out of the box.
• Search: Built-in indexed searching powered by Nuxt Content.
• Compatibility: Offers partial component compatibility with Docus, Nuxt UI Pro Docs, and undocs.

The shadcn-docs-nuxt project includes a suite of prose components designed to style standard Markdown elements. When writing content in Markdown files, the following elements are supported and styled via the prose engine:

• Headings: # through ###### (H1 to H6).
• Links: [Text](/path).
• Blockquotes: > Text.
• Horizontal Rules: ---.
• Lists: Unordered (- Item) and Ordered (1. Item).
• Paragraphs: Standard text blocks.
• Text Styling: Strong (**text**) and Italic (_text_).
• Tables: Standard Markdown pipe tables.
• Code Blocks: Fenced code blocks (see specific documentation for advanced features).
• Images: Standard Markdown image syntax.

For more detailed information on specific complex components, refer to the dedicated guides for Code Blocks and Images and Embeds.

The sidebar.style property in _dir.yml determines how the folder and its children are rendered in the navigation. The available options are:

• default: The standard sidebar layout.
• tree: A tree-style hierarchical layout.
• group: A grouped layout.

The default value for this setting can be configured globally in the appConfig under the aside key.

sidebar:
  style: group

The Alert component supports several semantic variants via the type property to convey different levels of importance or meaning:

• info: Informational messages.
• note: General notes or annotations.
• success: Positive outcomes or successful actions.
• example: Illustrative examples.
• warning: Cautionary messages.
• danger: Critical errors or dangerous actions.
• secondary: A secondary visual style (distinct from semantic types).
• default: The standard alert style.

::alert{type="info" icon="lucide:info"}
  An **info** alert.
::

::alert{type="success" icon="lucide:lightbulb"}
  A **success** alert.
::

::alert{type="danger" icon="lucide:circle-x"}
  A **danger** alert.
::

You can synchronize the active tab across different ::tabs instances by providing a matching sync string value. When two or more components share the same sync value, selecting a tab in one will automatically select the corresponding tab in the others.

Example:

# Scope 1
::tabs{variant="card" sync="my-scope"}
  ::div{label="Tab A"}
  ::
::

# Scope 2
::tabs{variant="line" sync="my-scope"}
  ::div{label="Tab A"}
  ::
::

::tabs{variant="card" sync="your-scope-name"}
  ::div{label="Card Tab"}
  ### This is a card-style tab
  ::
::

::tabs{variant="line" sync="your-scope-name"}
  ::div{label="Card Tab"}
  ### This is a card-style tab
  ::
::

The sidebar.style option allows you to control how the folder and its children are rendered in the sidebar. The available options are:

• default: The standard sidebar layout.
• tree: A tree-structured hierarchical layout.
• group: A grouped layout.

The global default for this setting can be configured in the appConfig under the aside section.

sidebar:
  style: group

You can synchronize the active tab state between different ::tabs instances by providing the same string value to the sync prop. When tabs share a sync scope, selecting a tab in one component will automatically select the corresponding tab in all other components within that same scope.

Example: If two ::tabs components both have sync="my-scope", they will stay in sync.

::tabs{sync="scope1"}
  ::div{label="Tab A"}
  ::
::

::tabs{sync="scope1"}
  ::div{label="Tab A"}
  ::
::

The ::tabs component supports several visual styles via the variant property:

• separate (default): Standard tabbed interface.
• card: Displays tabs in a card-like container.
• line: A minimalist style with underlined active tabs.
• combobox: Converts the tabs into a searchable dropdown menu, useful when there are many tabs.

Example of a card-style tab:

::tabs{variant="card"}
  ::div{label="Card Tab"}
  ### Content
  ::
::

::tabs{variant="card"}
  ::div{label="Card Tab"}
  ### This is a card-style tab
  ::
  ::div{label="Tab 2" icon="lucide:atom"}
  This is Tab #2
  ::
::