Overriding

shadcn-docs-nuxt is a Nuxt Layer. You can override any component in shadcn-docs-nuxt by creating a custom vue component in your project with the same path as the original component. Make sure that your component contains the same props as the original component.

Here is a brief showcase of the components/ folder in shadcn-docs-nuxt.

For example, if you want to override the Footer component, create /components/layout/Footer.vue in your project root.

<template>
  <footer class="text-muted-foreground py-6 md:px-8 md:py-0">
    <div class="container flex flex-col items-center justify-between gap-2 md:h-24 md:flex-row">
      My footer
      <span class="flex-1" />
      {{ footer.credits }}
    </div>
  </footer>
</template>

<script setup lang="ts">
const { footer } = useConfig().value;
</script>