shadcn-docs

Customizing shadcn-docs-nuxt.

shadcn-docs-nuxt is configured through app.config.ts.

app.config.ts 
export default defineAppConfig({
  shadcnDocs: {
    header: {
      xxx
    },
    aside: {
      xxx
    },
    main: {
      xxx
    },
    xxx
  },
});

Fields Reference

Illustrative type declarations:

type Target = '_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined;

interface ILink {
  title?: string;
  icon?: string;
  to: string;
  target?: Target;
}

interface INav {
  title: string;
  links?: (ILink & { description: string })[];
  to?: string;
  target?: Target;
}

Icons

All configurable icons can be set to iconify icons, emojis and urls, using smart icon under the hood.

site

namestring
The site name shown on the tap title: <page> - <site_name>.
descriptionstring
The site description for SEO.
ogImagestring
The path to the Open Graph image.
ogImageComponentstring
ShadcnDocs
The component to use for the dynamic ogImage. Possible values: ShadcnDocs, Nuxt, NuxtSeo or your custom component name.

theme

customizableboolean
true
Whether the theme can be customized by the user (show the customize button in the header).
colorColor
zinc
The default color theme. https://www.shadcn-vue.com/themes.html
radiusstring
0.5
The default radius.

header

showLoadingIndicatorboolean
true
Whether to show the nuxt loading indicator.
titlestring
The title shown on the header next to the icon.
showTitleboolean
true
Whether to show the title text on the header.
borderboolean
false
Whether to show the bottom border of the header.
darkModeToggleboolean
true
Whether to show the dark mode toggle.
logo{ light: string; dark: string; }
{ light: '/logo.svg', dark: '/logo-dark.svg' }
The path to the logo image files in /public. light is for the icon shown in light mode, dark is for the icon shown in dark mode.
showTitleInMobileboolean
false
Whether to show the logo and title in mobile. (Recommended to use with button styled search bar)
navINav[]
[]
The content of the navbar in the header.
linksILink[]
[]
The links on the right of the header.

aside

useLevelboolean
true
Whether to use level-styled sidebar.
collapseboolean
false
Whether to collapse all collapsible by default.
folderStyle'default' | 'tree' | 'group'
default
The default style used for folders.

main

paddedboolean
true
Whether the page is padded.
breadCrumbboolean
true
Whether to show the bread crumb.
showTitleboolean
true
Whether to show the title section.
codeCopyToastboolean
true
Whether to show a toast on code copy.
codeCopyToastTextstring
'Copied to clipboard!'
The text shown in the toaster.
fieldRequiredTextstring
'required'
The text shown in the field component when a field is required.
codeIconRecord<string, string>
The icon mapping for language / filename in the code group header.

footer

creditsstring
''
The credit text on the left side of the footer.
linksILink[]
[]
The links on the right side of the footer.

toc

enableboolean
true
Whether to turn on the toc section.
enableInMobileboolean
false
Whether to turn on the toc section in mobile.
titlestring
'On This Page'
The title for the toc section.
linksILink[]
[]
The links under the toc section.

search

enableboolean
true
Whether to turn on the search feature.
inAsideboolean
false
Whether to show the search bar in the sidebar.
style'input' | 'button'
input
Whether the search bar is displayed as a input or a button.
placeholderstring
'Search...'
The placeholder text shown in the search bar.
placeholderDetailedstring
'Search documentation...'
The placeholder text shown in the search dialog input.

Default Config

composables/useConfig.ts 
const defaultConfig: DefaultConfig = {
  site: {
    name: 'shadcn-docs',
    description: 'Beautifully designed Nuxt Content template built with shadcn-vue. Customizable. Compatible. Open Source.',
    ogImage: '/hero.png',
    ogImageComponent: 'ShadcnDocs',
  },
  theme: {
    customizable: true,
    color: 'zinc',
    radius: 0.5,
  },
  header: {
    showLoadingIndicator: true,
    title: 'shadcn-docs',
    showTitle: true,
    logo: {
      light: '/logo.svg',
      dark: '/logo-dark.svg',
    },
    showTitleInMobile: false,
    border: false,
    darkModeToggle: true,
    nav: [],
    links: [],
  },
  aside: {
    useLevel: true,
    collapse: false,
    folderStyle: 'default',
  },
  main: {
    breadCrumb: true,
    showTitle: true,
    codeCopyToast: true,
    codeCopyToastText: 'Copied to clipboard!',
    fieldRequiredText: 'required',
    padded: true,
    codeIcon: {
      'package.json': 'vscode-icons:file-type-node',
      'tsconfig.json': 'vscode-icons:file-type-tsconfig',
      '.npmrc': 'vscode-icons:file-type-npm',
      '.editorconfig': 'vscode-icons:file-type-editorconfig',
      '.eslintrc': 'vscode-icons:file-type-eslint',
      '.eslintrc.cjs': 'vscode-icons:file-type-eslint',
      '.eslintignore': 'vscode-icons:file-type-eslint',
      'eslint.config.js': 'vscode-icons:file-type-eslint',
      'eslint.config.mjs': 'vscode-icons:file-type-eslint',
      'eslint.config.cjs': 'vscode-icons:file-type-eslint',
      '.gitignore': 'vscode-icons:file-type-git',
      'yarn.lock': 'vscode-icons:file-type-yarn',
      '.env': 'vscode-icons:file-type-dotenv',
      '.env.example': 'vscode-icons:file-type-dotenv',
      '.vscode/settings.json': 'vscode-icons:file-type-vscode',
      'nuxt': 'vscode-icons:file-type-nuxt',
      '.nuxtrc': 'vscode-icons:file-type-nuxt',
      '.nuxtignore': 'vscode-icons:file-type-nuxt',
      'nuxt.config.js': 'vscode-icons:file-type-nuxt',
      'nuxt.config.ts': 'vscode-icons:file-type-nuxt',
      'nuxt.schema.ts': 'vscode-icons:file-type-nuxt',
      'tailwind.config.js': 'vscode-icons:file-type-tailwind',
      'tailwind.config.ts': 'vscode-icons:file-type-tailwind',
      'vue': 'vscode-icons:file-type-vue',
      'ts': 'vscode-icons:file-type-typescript',
      'tsx': 'vscode-icons:file-type-typescript',
      'mjs': 'vscode-icons:file-type-js',
      'cjs': 'vscode-icons:file-type-js',
      'js': 'vscode-icons:file-type-js',
      'jsx': 'vscode-icons:file-type-js',
      'md': 'vscode-icons:file-type-markdown',
      'mdc': 'vscode-icons:file-type-markdown',
      'py': 'vscode-icons:file-type-python',
      'npm': 'vscode-icons:file-type-npm',
      'pnpm': 'vscode-icons:file-type-pnpm',
      'npx': 'vscode-icons:file-type-npm',
      'yarn': 'vscode-icons:file-type-yarn',
      'bun': 'vscode-icons:file-type-bun',
      'yml': 'vscode-icons:file-type-yaml',
      'json': 'vscode-icons:file-type-json',
      'terminal': 'lucide:terminal',
    },
  },
  footer: {
    credits: '',
    links: [],
  },
  toc: {
    enable: true,
    enableInMobile: false,
    title: 'On This Page',
    links: [],
  },
  search: {
    enable: true,
    inAside: false,
    style: 'input',
    placeholder: 'Search...',
    placeholderDetailed: 'Search documentation...',
  },
};
HeroAlt
Nuxt Content
Configuring the Nuxt Content module.

Cookies

We use cookies to enhance your browsing experience and analyze site traffic.Your privacy is important to us: we do not sell or share your personal data, and your information is securely stored. By continuing to use our site, you agree to our use of cookies.
Learn more about how we handle your data in our .