Styling

Default stylesheet

Stacksheet ships precompiled styles. Import them once in your app entry:

import "@howells/stacksheet/styles.css";

If your app uses Tailwind, no extra @source configuration is required for Stacksheet.

Class names

Stacksheet renders with sensible defaults (white background, subtle shadow, backdrop overlay). Override with CSS classes:

<StacksheetProvider
  classNames={{
    backdrop: "my-backdrop",
    panel: "my-panel",
    header: "my-header",
  }}
>

When a class is provided, the corresponding inline background/border styles are removed so your CSS has full control.

CSS custom properties

The library uses CSS custom properties as fallbacks:

.my-panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-radius: 0;
}

.my-backdrop {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
}

Custom header

Replace the default back/close header with the renderHeader prop:

<StacksheetProvider
  renderHeader={({ isNested, onBack, onClose, side }) => (
    <header className="my-header">
      {isNested && <button onClick={onBack}>Back</button>}
      <span>Side: {side}</span>
      <button onClick={onClose}>Close</button>
    </header>
  )}
>

HeaderRenderProps

The default header is a 48px bar with icon buttons — a back arrow (shown when nested) and a close X.

Composable mode

For full control over the panel layout, set renderHeader={false} and use Sheet.* parts:

<StacksheetProvider renderHeader={false}>
  <App />
</StacksheetProvider>

This is a third option beyond the default header and renderHeader function. See Composable Parts for the full guide.

Data attributes

These attributes are used by the library for behavior and can be targeted in CSS: