---
url: "https://vueda.dev/v3/reference/theming/keys/StickyStackProvider.md"
title: "StickyStackProvider"
---

# StickyStackProvider

Source: `client/lib/theme/vueda-tailwind/shell/index.js`

> Structural wrapper around the bars and the scrolling content. Lays them out in a column and
introduces no `overflow`, so the bars (its direct children) pin relative to the window. It
also carries the `--vueda-sticky-stack-top` custom property (set inline from the visible
top-stack height) for descendants such as a sticky grid header to consume.

Vue component: [StickyStackProvider](/v3/reference/api/vue/StickyStackProvider.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/StickyStackProvider.md#theme-key-StickyStackProvider-root) | `flex flex-col` | Structural wrapper around the bars and the scrolling content. Lays them out in a column and introduces no `overflow`, so the bars (its direct children) pin relative to the window. It also carries the `--vueda-sticky-stack-top` custom property (set inline from the visible top-stack height) for descendants such as a sticky grid header to consume. |
| [bar](/v3/reference/theming/keys/StickyStackProvider.md#theme-key-StickyStackProvider-bar) | 4 classes | A single sticky bar in the stack (the title, the bottom slot, or a view's teleported chrome). Pins to the viewport edge; its `top`/`bottom`, hide transform, and stacking order are applied inline by the component. Carries an opaque background so scrolling content does not bleed through, and transitions only its transform (so a bar slides smoothly as it hides and the survivors compact). Child chrome supplies its own borders and padding. |

<a id="theme-key-StickyStackProvider-root"></a>

## root

> Structural wrapper around the bars and the scrolling content. Lays them out in a column and
introduces no `overflow`, so the bars (its direct children) pin relative to the window. It
also carries the `--vueda-sticky-stack-top` custom property (set inline from the visible
top-stack height) for descendants such as a sticky grid header to consume.

Default classes:

`flex flex-col`

Source: `client/lib/theme/vueda-tailwind/shell/StickyStackProvider.theme.js:25`

<a id="theme-key-StickyStackProvider-bar"></a>

## bar

> A single sticky bar in the stack (the title, the bottom slot, or a view's teleported
chrome). Pins to the viewport edge; its `top`/`bottom`, hide transform, and stacking order
are applied inline by the component. Carries an opaque background so scrolling content does
not bleed through, and transitions only its transform (so a bar slides smoothly as it hides
and the survivors compact). Child chrome supplies its own borders and padding.

Default classes:

```text
sticky
flex flex-col
bg-background
transition-transform duration-300 ease-in-out
```

Source: `client/lib/theme/vueda-tailwind/shell/StickyStackProvider.theme.js:35`