fix(Header): move container slot classes into theme for doc accuracy

[faizkhairi]

Description

Fixes #6298

The UHeader container slot was rendered via <UContainer>, which silently adds its own base classes (w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8) to the element. The header.ts theme only defined flex items-center justify-between gap-3 h-full, so the docs showed an incomplete class list.

Root Cause

Header.vue used <UContainer> for the container slot, but UContainer injects its own base classes outside the theming system. This caused a mismatch between what the docs display (from header.ts) and what is actually rendered in the DOM.

Fix

• Replace <UContainer> with a plain <div> in Header.vue
• Add the UContainer base classes directly to the container slot in header.ts
• Remove the now-unused UContainer import

The rendered output is identical -- the snapshots confirm this. The only change is that all container classes are now explicitly defined in the theme, making the docs accurate and the slot fully customizable via the ui prop.

Tests

All existing tests and snapshots pass without modification.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 958abeeb-deb9-44d5-a381-3a3d37790cdc

📥 Commits

Reviewing files that changed from the base of the PR and between c123305 and cb2c35e.

📒 Files selected for processing (1)

• src/runtime/components/Header.vue

✅ Files skipped from review due to trivial changes (1)

• src/runtime/components/Header.vue

---

📝 Walkthrough

Walkthrough

Replaced the UContainer component in Header.vue with a plain <div> that keeps data-slot="container" and applies ui.container({ class: uiProp?.container }); inner template/slot structure and control flow remain unchanged. Updated src/theme/header.ts to change the container slot classes to a responsive layout: full-width behavior, max-w constrained by --ui-container, horizontally centered, with responsive horizontal padding (px-4 sm:px-6 lg:px-8) while preserving flex alignment, gap, and height.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title directly addresses the main change: moving UContainer base classes into the theme's header.ts to fix documentation accuracy.
Description check	✅ Passed	The description clearly explains the root cause (UContainer injecting classes outside the theming system), the fix (moving classes into header.ts), and confirms backward compatibility with passing tests.
Linked Issues check	✅ Passed	The PR successfully resolves issue #6298 by moving container slot classes into the theme system, ensuring documented classes match runtime output and enabling full customization via the ui prop.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the documentation mismatch: Header.vue component refactoring and header.ts theme updates. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6300

commit: cb2c35e

[benjamincanac]

Closing this as the documentation reflects what each component defines. We're not going to stop using reusable components.