Themes

Add colors. Make it yours.

UI Theme

app.config.ts
export default defineAppConfig({
  shadcnDocs: {
    theme: {
      customizable: true,
      color: 'zinc',
      radius: 0.5,
    },
  },
});
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.

Using Different Fonts

You can customize your font in tailwind.config.js file. shadcn-docs-nuxt uses @nuxt/fonts under the hood, so you can use any font you want. Default font is Geist Font.

tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Geist'],
        mono: ['Geist Mono'],
      },
    },
  },
};
Edit this page
Code Snippet
Importing and displaying source code from your project.
Composables
Composable functions exported by shadcn-docs-nuxt.