# Slots \[Inject custom components into the docs shell]
## Overview
Slots let you replace specific regions of the Vocs layout — the footer, the outline footer, and the sidebar header — without writing a custom layout. Define them by exporting React components from `src/pages/_slots.tsx`; Vocs picks them up at build time and renders them in place.
Supported slots:
* **`Footer`** — bottom of every page, below the page content and pagination. Good for attribution, copyright, or extra links.
* **`OutlineFooter`** — bottom of the right-hand outline, beneath the feedback widget. Good for community pointers like a Discord link.
* **`SidebarHeader`** — top of the left sidebar, above the navigation tree. Good for version switchers, environment badges, or product pickers.
Any subset can be exported — slots you omit fall back to the default Vocs UI.
## Recipes
### Adding a Site Footer
Export `Footer` from `_slots.tsx` to render content beneath every page.
```tsx [src/pages/_slots.tsx]
export function Footer() { // [!code focus:5]
return (
© 2025 My Project. All rights reserved.
)
}
```
### Adding an Outline Footer
Export `OutlineFooter` for a short pointer below the outline (e.g. a community link).
```tsx [src/pages/_slots.tsx]
export function OutlineFooter() { // [!code focus:8]
return (
)
}
```
### Adding a Sidebar Header
Export `SidebarHeader` to put a version switcher, badge, or product picker above the sidebar nav.
```tsx [src/pages/_slots.tsx]
export function SidebarHeader() { // [!code focus]
return v2.0 · Beta
// [!code focus]
} // [!code focus]
```
### Using Browser APIs in a Slot
Slot components run as React Server Components by default. Add `'use client'` when you need browser APIs or state.
```tsx [src/pages/_slots.tsx]
'use client' // [!code focus]
import { useEffect, useState } from 'react'
export function SidebarHeader() {
const [theme, setTheme] = useState('light') // [!code focus]
useEffect(() => setTheme(document.documentElement.dataset.theme ?? 'light'), []) // [!code focus]
return Theme: {theme}
}
```
## See More