feat(docs): code block tabs with a sliding indicator

[rpvilo]

Summary

• Multi-file and package-manager code blocks use the @base-ui/react Tabs: tab and tabpanel semantics, arrow-key navigation, and a 2px indicator that slides between labels.
• Inactive tabs get a rounded-square background on hover and keyboard focus; the copy button is a rounded square to match.
• A single file's name is a plain CodeTitle label rather than a tab.
• installation-block-tabs.tsx is removed: InstallationBlock renders CodeFiles directly.
• The frame's side padding is 6px.

Release

Docs only, no package change and no changeset.

Summary by CodeRabbit

• New Features
  • Code examples now use consistent, selectable tabs for switching between files and package-manager installation commands. The selected example remains available to copy.
• Style
  • Code frames have tighter spacing, a sliding indicator for the active tab, and a rounded-square copy button.
  • Active code titles are visually distinct from inactive labels.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
intentface-chat	Ready	Preview	Oct 11, 2026 8:53pm UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Essentials
• Run ID: 23da2f8d-39c3-43b6-a83f-b024eefd4a50

---

📥 Commits

Reviewing files that changed from the base of the PR and between adf6d52 and bd2fcd7.

---

📒 Files selected for processing (5)

• components/docs/code-block.tsx
• components/docs/code-files.tsx
• components/docs/code-frame.tsx
• components/docs/installation-block-tabs.tsx
• components/docs/installation-block.tsx

---

💤 Files with no reviewable changes (1)

• components/docs/installation-block-tabs.tsx

---

Included review availability: This review used your included allowance. 3 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

---

📜 Recent review details

⏰ Context from checks skipped due to timeout. (3)

• GitHub Check: verify
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: Analyze (actions)

---

🔇 Additional comments (4)

components/docs/code-frame.tsx (1)

3-3: LGTM!

Also applies to: 13-14, 31-31, 35-36, 45-59, 61-75, 77-85, 87-88, 94-105, 107-108, 119-119

---

components/docs/code-block.tsx (1)

5-5: LGTM!

Also applies to: 37-37

---

components/docs/code-files.tsx (1)

3-3: LGTM!

Also applies to: 6-6, 22-42

---

components/docs/installation-block.tsx (1)

3-3: LGTM!

Also applies to: 10-10, 12-14, 17-18

---

---

📝 Walkthrough

Walkthrough

The documentation code frame now uses Base UI tabs. Code-file and installation blocks render their entries through the shared tab components, with each selected file’s source passed to the code frame.

Changes

Documentation code tabs

Layer / File(s)	Summary
Code frame tab primitives components/docs/code-frame.tsx, components/docs/code-block.tsx	CodeFrame adds tab list, tab, and panel components using Base UI primitives. CodeTitle renders static labels, and CodeBlock uses it for the active label.
Code-file and installation tabs components/docs/code-files.tsx, components/docs/installation-block.tsx, components/docs/installation-block-tabs.tsx	CodeFiles uses controlled tabs keyed by file name and renders a panel for each file. InstallationBlock passes package-manager commands to CodeFiles, replacing the deleted InstallationBlockTabs component.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~12 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant CodeFiles
  participant TabsRoot as Tabs.Root
  participant CodePanel
  participant CodeFrame
  User->>CodeFiles: Selects a file tab
  CodeFiles->>TabsRoot: Sets the selected file name
  TabsRoot->>CodePanel: Selects the panel with the matching value
  CodeFiles->>CodeFrame: Passes the selected file source

Loading

---

Merge Risk: ⚪ Minimal · up to bd2fc

The documentation tab changes appear ready to merge after normal checks.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: adding code block tabs with a sliding indicator in the documentation UI.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 4…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

---

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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