# Full-screen fluid dialog with sticky header and footer

> Full-screen fluid dialog with sticky header and footer

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-dialog-6).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-dialog-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-dialog-6-light-e87f27546e375819.png
- Registry item: https://reui.io/r/new-york-v4/c-dialog-6.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-dialog-6.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `button`, `dialog`

## Files

### `c-dialog-6.tsx`

```tsx
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

export function Pattern() {
  return (
    <div className="flex items-center justify-center">
      <Dialog>
        <DialogTrigger render={<Button variant="outline" />}>
          Full Screen Fluid
        </DialogTrigger>
        <DialogContent className="flex max-h-[calc(100vh-3rem)] w-full max-w-[calc(100vw-3rem)] flex-col overflow-hidden p-0">
          <DialogHeader className="bg-background sticky top-0 z-10 border-b px-6 py-4">
            <DialogTitle>Full Screen Dialog</DialogTitle>
            <DialogDescription>
              A fluid full-screen dialog with sticky header and footer.
            </DialogDescription>
          </DialogHeader>
          <div className="me-0.5 flex-1 [scrollbar-width:thin] [scrollbar-color:rgb(120_120_120/0.4)_transparent] overflow-auto px-6">
            <div className="space-y-4 text-sm">
              {Array.from({ length: 20 }).map((_, index) => (
                <p key={index} className="text-muted-foreground leading-normal">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
                  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                  irure dolor in reprehenderit in voluptate velit esse cillum
                  dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                  cupidatat non proident, sunt in culpa qui officia deserunt
                  mollit anim id est laborum.
                </p>
              ))}
            </div>
          </div>
          <DialogFooter className="bg-background border-t px-6 py-4">
            <DialogClose render={<Button variant="outline" />}>
              Close
            </DialogClose>
            <DialogClose render={<Button />}>Save changes</DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
```