# Shadcn Scrollable Content

> Sheet with scrollable content

- Type: example, free and open source (MIT)
- Component: [Sheet](https://reui.io/components/sheet.md)
- Page: https://reui.io/components/sheet/c-sheet-4
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/sheet.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/sheet.md
- MCP: `get_example("c-sheet-4")`
- Registry item: https://reui.io/r/styles/base-nova/c-sheet-4.json
- Uses: Button, Scroll Area, Sheet

## Best for

A long body in a ScrollArea between a pinned header and a Save and Cancel footer

## Agent notes

- `ScrollArea` fills the height between header and footer through `flex-1` and `min-h-0`, so it needs no fixed height when either changes

## Install

```bash
npx shadcn@latest add @reui/c-sheet-4
```

## About Shadcn Sheet

### When to use

- Edit forms and long scrolling content that slide in from a screen edge over the page
- Panels pinned to the top, right, bottom or left edge, with their own footer actions

### When not to use

- A touch panel the user drags or swipes closed: use [Drawer](https://reui.io/components/drawer.md) (`get_component("drawer")`)
- A ready made record detail, notification or settings panel: use the [Sheet blocks](https://reui.io/blocks/application/sheet.md)
- A short decision or form that belongs in the middle of the screen: use [Dialog](https://reui.io/components/dialog.md) (`get_component("dialog")`)

### Agent notes

- `SheetContent` draws its own corner close button; set `showCloseButton` to false when the footer closes it
- Top and bottom sheets grow with their content and have no height cap, so bound them as `c-sheet-3` does
- `SheetTrigger` and `SheetClose` take a `render` element on the base twin and `asChild` on the radix twin

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.