The layer ships the theme as files you can shadow. Three levels, smallest first —
and the smallest one that does the job is the right one, because a component you
replace is a component you now maintain.

## Steps

:::steps
1. **A colour: redefine the token.** The palette is the neutral shadcn set as CSS
   variables. Redefine one in your own stylesheet; no fork of the layer's file is
   needed.

   ```css [app/assets/css/main.css]
   :root {
     --primary: oklch(0.55 0.2 265);
   }
   .dark {
     --primary: oklch(0.7 0.18 265);
   }
   ```

   Both blocks matter: the theme switches on a `dark` **class**, not a media
   query, so a token defined once is wrong in one of the two modes.

   ::callout{type="warning" title="Check the contrast you just changed"}
   `--muted-foreground` carries the page descriptions, the table of contents and
   the breadcrumb. The layer's value is deliberately darker than shadcn's default,
   which measures below 4.5:1 on the surfaces this token actually lands on.
   ::

2. **A piece of the layout: create the file.** Nuxt resolves your component of the
   same name first, so replacing `DuxtFooter` is creating
   `app/components/DuxtFooter.vue` in your project. The names, props and slots
   are in the [components reference](/reference/components) — a documented name
   is part of the public surface, so it will not be renamed without a major
   release.

3. **A slot, where there is one.** `DuxtPageFeedback` emits `feedback` and
   exposes its state through a slot, so you can hang your own form on it without
   replacing the component — worked through in
   [Collect page feedback](/guides/collect-page-feedback).

4. **A new primitive: use the CLI.** The layer owns its shadcn-vue components
   rather than importing them, and `components.json` already points the CLI at
   the right alias:

   ```bash
   pnpm dlx shadcn-vue@latest add tooltip
   ```

5. **A component for Markdown.** Anything in `app/components/content/` is callable
   from a page with MDC block syntax. Your own file of the same name replaces the
   layer's — see the [MDC reference](/reference/mdc-components).

:::

## Checklist

- [ ] Nothing was copied out of the layer that a token could have changed
- [ ] Every redefined token has a value for both light and dark
- [ ] Replaced components are named exactly as the reference names them
- [ ] `pnpm build` still renders every page (an override is where SSR breaks)