---
title: Custom overlay examples
description: Build result-producing modals, sheets, and drawers with UI components.
order: 30
toc:
  - id: typed-modal
    title: Typed modal
  - id: sheet
    title: Sheet
  - id: drawer
    title: Drawer
---

## Typed modal {#typed-modal}

The render callback receives `close` and `dismiss`. `close` returns an application result while `dismiss` follows the cancellation path.

```tsx
import { openModal } from "@workspace/overlays/modal"
import { Button } from "@workspace/ui/components/button"

function PlanButton() {
  async function choosePlan() {
    const plan = await openModal<"free" | "pro">({
      title: "Choose a plan",
      description: "You can change this later.",
      content: ({ close, dismiss }) => (
        <div className="flex justify-end gap-2">
          <Button variant="outline" onClick={dismiss}>
            Cancel
          </Button>
          <Button onClick={() => close("free")}>Free</Button>
          <Button onClick={() => close("pro")}>Pro</Button>
        </div>
      ),
    })

    if (plan) updatePlan(plan)
  }

  return <Button onClick={choosePlan}>Change plan</Button>
}
```

## Sheet {#sheet}

```tsx
import { openSheet } from "@workspace/overlays/sheet"

await openSheet({
  title: "Filters",
  side: "right",
  content: <ProductFilters />,
})
```

Use a sheet for a fixed edge panel. `side` accepts `top`, `right`, `bottom`, or `left`.

## Drawer {#drawer}

```tsx
import { openDrawer } from "@workspace/overlays/drawer"

await openDrawer({
  title: "Choose a delivery time",
  content: <DeliverySlots />,
  showSwipeHandle: true,
  snapPoints: [0.5, 1],
  swipeDirection: "down",
})
```

Use a drawer for touch-oriented interaction with configurable swipe direction and Base UI snap points.