Skip to content

Foundations

Modal Sheet

Centered dialog and edge sheet (drawer) — focus trap, scroll lock, Esc and backdrop to close.

2 variantsMIT

Preview

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/modal-sheet.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { Dialog, DialogClose, Sheet } from "@/components/ui/modal-sheet";

<Dialog
  title="Share chat"
  description="Anyone with the link can read it."
  trigger={<Button>Share</Button>}
  footer={
    <>
      <DialogClose asChild><Button variant="quiet">Cancel</Button></DialogClose>
      <Button variant="primary" onClick={copyLink}>Copy link</Button>
    </>
  }
>
  <TextField label="Link" readOnly value={url} />
</Dialog>

<Sheet side="left" title="Chats" open={open} onOpenChange={setOpen}>
  <ConversationList data={chats} />
</Sheet>

Props

PropTypeDefaultDescription
title*ReactNode—Heading; also the accessible name.
descriptionReactNode—Secondary line under the title.
childrenReactNode—Body, placed in an inset panel.
footerReactNode—Actions row, right-aligned.
triggerReactElement—Optional element that opens it; otherwise control open yourself.
open / onOpenChangeboolean / (open: boolean) => void—Optional control of the open state.
size"sm" | "md" | "lg""md"Dialog only. Max width.
side"left" | "right" | "bottom""left"Sheet only. The edge it slides in from.