Opens as

{ event.preventDefault(); setOpen(false); }} > Edit profile Change how others see you. Save when you're done.

Name

Username

Bio

</div>
              </div>
              <DrawerFooter>
                <DrawerClose asChild>
                  <Button variant="outline">Cancel</Button>
                </DrawerClose>
                <Button type="submit">Save changes</Button>
              </DrawerFooter>
            </form>
          </DrawerContent>
        </Drawer>
      </div>
    </div>
  );
}
```

### Long content

The sheet grows to just under the status bar; its content scrolls on its own and the buttons stay pinned.

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

const sections = [
  {
    title: "Your account",
    text: "You're responsible for what happens under your account, and for keeping its password safe.",
  },
  {
    title: "Your content",
    text: "What you upload stays yours. You let us store and show it so the service can work.",
  },
  {
    title: "Acceptable use",
    text: "Don't break the law, harm others, or try to get round the limits of your plan.",
  },
  {
    title: "Payments",
    text: "Paid plans renew each month until you cancel. Cancelling stops the next renewal.",
  },
  {
    title: "Privacy",
    text: "We collect only what the service needs. The privacy policy says what, and why.",
  },
  {
    title: "Changes",
    text: "We'll tell you about changes that matter at least 30 days before they apply.",
  },
  {
    title: "Ending",
    text: "You can close your account at any time. We may close one that breaks these terms.",
  },
];

/*
 * Long content: the sheet grows to just under the status bar, its body scrolls on its own, and the buttons
 * stay pinned at the bottom. Drag it down from the top of the text, or by the grabber, to close it.
 */
export default function DrawerScrolling() {
  return (
    <Drawer mode="sheet">
      <DrawerTrigger asChild>
        <Button variant="outline">Read the terms</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Terms of service</DrawerTitle>
          <DrawerDescription>Updated 1 October 2026</DrawerDescription>
        </DrawerHeader>
        {sections.map((section) => (
          <section key={section.title} className="grid gap-1.5">
            <h3 className="text-sm font-medium">{section.title}</h3>
            <p className="text-sm text-muted-foreground">{section.text}</p>
          </section>
        ))}
        <DrawerFooter>
          <DrawerClose asChild>
            <Button variant="outline">Decline</Button>
          </DrawerClose>
          <DrawerClose asChild>
            <Button>Accept</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}
```

### A sheet on a sheet

A drawer opened from a sheet: the first steps back behind the second.

```tsx
"use client";

const people = ["Olivia Martin", "Jackson Lee", "Isabella Nguyen"];

/*
 * A sheet opened from a sheet: the first steps back behind the second, and comes forward again when it closes.
 * The inner drawer follows its parent, so it's a sheet here too.
 */
export default function DrawerNested() {
  return (
    <Drawer mode="sheet">
      <DrawerTrigger asChild>
        <Button variant="outline">Share</Button>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>Share the Q4 plan</DrawerTitle>
          <DrawerDescription>These people can open it.</DrawerDescription>
        </DrawerHeader>
        <ul className="grid gap-2 text-sm">
          {people.map((person) => (
            <li key={person}>{person}</li>
          ))}
        </ul>
        <DrawerFooter>
          <Drawer mode="sheet">
            <DrawerTrigger asChild>
              <Button>Add people</Button>
            </DrawerTrigger>
            <DrawerContent>
              <DrawerHeader>
                <DrawerTitle>Add people</DrawerTitle>
                <DrawerDescription>They'll get an email with a link.</DrawerDescription>
              </DrawerHeader>
              <DrawerFooter>
                <DrawerClose asChild>
                  <Button>Done</Button>
                </DrawerClose>
              </DrawerFooter>
            </DrawerContent>
          </Drawer>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}
```

## Related

- [Dialog](https://ui.fewtone.com/components/dialog.md): An accessible React dialog for Next.js and Tailwind CSS: a modal window that grows out of its trigger, keeps focus inside and returns it, built on Radix Dialog.
- [Sheet](https://ui.fewtone.com/components/sheet.md): An accessible React sheet for Next.js: a side panel that slides in from any edge of the screen, for forms, filters and navigation, built on Radix Dialog.
- [Alert Dialog](https://ui.fewtone.com/components/alert-dialog.md): An accessible React alert dialog for Next.js that asks people to confirm destructive actions, with focus starting on Cancel, built on Radix Alert Dialog.