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

# SheetContent

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

> The edge-attached sheet surface. It maps the `side` prop to slide direction, edge border, size, and overlay shadow while preserving a flex column body.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/SheetContent.md#theme-key-SheetContent-root) | callback | The edge-attached sheet surface. It maps the `side` prop to slide direction, edge border, size, and overlay shadow while preserving a flex column body. |
| [close](/v3/reference/theming/keys/SheetContent.md#theme-key-SheetContent-close) | 3 classes | The close control inside a sheet. It stays visually quiet until hover or focus and uses the same keyboard focus outline as dialog close controls. |

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

## root

> The edge-attached sheet surface. It maps the `side` prop to slide direction, edge border, size, and overlay shadow while preserving a flex column body.

Callback:

```javascript
({ side }) => {
            const sideClasses = {
                right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l-hairline sm:max-w-sm",
                left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r-hairline sm:max-w-sm",
                top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b-hairline",
                bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t-hairline",
            };
            return {
                class: [
                    // Surface and state motion.
                    "bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out",

                    // Positioning and layout.
                    "fixed z-50 flex flex-col gap-4",

                    // Elevation and duration.
                    "shadow-vueda-overlay transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",

                    sideClasses[side] || sideClasses.right,
                ],
            };
        }
```

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

<a id="theme-key-SheetContent-close"></a>

## close

> The close control inside a sheet. It stays visually quiet until hover or focus and uses the same keyboard focus outline as dialog close controls.

Default classes:

```text
data-[state=open]:bg-secondary absolute top-4 right-4
rounded-xs opacity-70 transition-opacity hover:opacity-100 focus-visible:focus-ring disabled:pointer-events-none
text-sm leading-none
```

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