# Sticky header

On long tables (the audit log) the header row sticks under the top bar while the body scrolls, and the toolbar sticks above it. Needs the kit v2 `overflow:clip` shell so sticky works on a real page.

- **Group:** Data table · **family:** `data-table` · **shadcn:** Table
- **Build:** CSS only (`sticky top-[56px]`).
- **In apps/admin today:** No `table.tsx` and no @tanstack/react-table in apps/admin; both are new.
- **Client component:** no. 

## Content rules

- —

## Do

- Use `overflow: clip` on shell ancestors.

## Don't

- `overflow: hidden` on any ancestor of a sticky element (it silently breaks).

## Accessibility

- **Keyboard:** —
- **ARIA:** Header remains the `thead`.
- **Focus:** Focused row scrolls into view below the sticky header (`scroll-margin-top`).

## Tokens

`--r-frame` `--background` `--e-frame` `--font-voice` `--font-stretch-title` `--row-th` `--s-3` `--muted` `--border` `--text-small` `--w-semibold` `--muted-foreground` `--text-code` `--font-code` `--z-sticky`

## Files

`sticky-header.html` live specimen · `sticky-header.css` kit rules · `sticky-header.d.ts` props · full page: `docs/components/sticky-header/` (phone: `m/`).