Brand the card and translate labels

Start with CSS variables. This keeps the tested layout, focus behavior, and responsive rules.

[data-tour-part='root'] {
  --tour-accent: #0f766e;
  --tour-accent-hover: #115e59;
  --tour-card-radius: 1rem;
  --tour-overlay-color: rgb(2 6 23 / 64%);
  --tour-spotlight-padding: 10px;
}

The default theme follows the system scheme. It also recognizes .light, .dark, [data-theme="light"], and [data-theme="dark"].

Translate the controls

<TourHost
  :labels="{
    previous: 'Zurück',
    next: 'Weiter',
    finish: 'Fertig',
    skip: 'Tour überspringen',
    close: 'Tour schließen',
    pending: 'Nächster Schritt wird geladen',
    progress: (current, total) => `Schritt ${current} von ${total}`,
  }"
/>

Connect these values to the application translation system when the locale can change at runtime.

Use design-system buttons

Start with the actions slot. Keep its pending and error handling when replacing the native button.

In a Nuxt UI application, use the installed UButton in that slot:

<UButton :disabled="pending" :loading="pending" @click="advance(controller.next)">
  {{ index === total - 1 ? labels.finish : labels.next }}
</UButton>

In a shadcn-vue application, import your generated button component and use the same slot values and handler:

<Button :disabled="pending" @click="advance(controller.next)">
  {{ index === total - 1 ? labels.finish : labels.next }}
</Button>

These are replacements for the button in the complete actions-slot example. Nuxt Tour does not install either component system. The host keeps the default heading, description, close control, dialog, and focus boundaries.

Replace the complete card body

Use the #card slot when variables and section slots are not sufficient. Follow the complete custom-card example, which uses the resolved title and keeps command error feedback outside the host.

The host still owns the dialog wrapper, positioning, focus scope, Escape, and cleanup. Use the supplied IDs so assistive technology receives the correct title and description.