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.
components/
├── layout/ # Layout components (headers)
│ ├── Header.vue
│ ├── Footer.vue
│ └── ...
├── content/ # Prose components and mdc components
│ ├── Accordion.vue
│ ├── Alert.vue
│ ├── ProseCode.vue
│ └── ...
└── ui/ # shadcn-vue components
├── button/
├── card/
└── ...
Check out the complete file structure on GitHub
For example, if you want to override the Footer
component, create /components/layout/Footer.vue
in your project root.
/components/layout/Footer.vue
<script setup lang="ts">
const { footer } = useConfig().value
</script>
<template>
<footer class="py-6 text-muted-foreground md:px-8 md:py-0">
<div class="container flex flex-col items-center justify-between gap-2 md:h-24 md:flex-row">
<footer class="py-6 text-muted-foreground 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>
</div>
</footer>
</template>