Sheet

Extends the Dialog to display content that complements the main content of the screen.

Open

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <div className="px-4">
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
          <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
        </Field>
        <Field>
          <FieldLabel htmlFor="sheet-demo-username">Username</FieldLabel>
          <Input id="sheet-demo-username" defaultValue="@peduarte" />
        </Field>
      </FieldGroup>
    </div>
    <SheetFooter>
      <Button type="submit">Save changes</Button>
      <SheetClose render={<Button variant="outline" />}>Close</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Installation

pnpm dlx cubix@latest add sheet --base aria

Usage

Import

import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/cubix/sheet"

Example

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Are you absolutely sure?</SheetTitle>
      <SheetDescription>This action cannot be undone.</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Composition

Use the following composition to build a Sheet:

Sheet
├── SheetTrigger
└── SheetContent
    ├── SheetHeader
    │   ├── SheetTitle
    │   └── SheetDescription
    └── SheetFooter

Side

Use the side prop on SheetContent to set the edge of the screen where the sheet appears. Values are top, right, bottom, or left.

{SHEET_SIDES.map((side) => (
  <Sheet key={side}>
    <SheetTrigger render={<Button variant="outline" className="capitalize" />}>
      {side}
    </SheetTrigger>
    <SheetContent side={side}>
      <SheetHeader>
        <SheetTitle>Edit profile</SheetTitle>
        <SheetDescription>
          Make changes to your profile here. Click save when you're done.
        </SheetDescription>
      </SheetHeader>
      <SheetFooter>
        <Button type="submit">Save changes</Button>
        <SheetClose render={<Button variant="outline" />}>Cancel</SheetClose>
      </SheetFooter>
    </SheetContent>
  </Sheet>
))}

No Close Button

Use showCloseButton={false} on SheetContent to hide the close button.

No Close Button

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>
    No Close Button
  </SheetTrigger>
  <SheetContent showCloseButton={false}>
    <SheetHeader>
      <SheetTitle>No Close Button</SheetTitle>
      <SheetDescription>
        This sheet doesn't have a close button in the top-right corner.
      </SheetDescription>
    </SheetHeader>
    <SheetFooter>
      <SheetClose render={<Button variant="outline" />}>Close</SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

API Reference

Sheet is built on the Dialog primitive. See also the Base UI Dialog documentation for additional props.

Sheet

Prop	Type	Default	Description
open	boolean	-	Controlled open state. Omit to use uncontrolled mode.
defaultOpen	boolean	false	Initial open state when uncontrolled.
onOpenChange	(open: boolean) => void	-	Called when the open state changes.
children	React.ReactNode	-	The trigger and sheet content.

SheetTrigger

Prop	Type	Default	Description
render	React.ReactElement	-	Compose the trigger onto a child element such as Button (Base UI).
asChild	boolean	-	Compose the trigger onto a child element such as Button (Radix UI).
children	React.ReactNode	-	The trigger content.

SheetContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"right"	Edge of the screen where the sheet appears.
showCloseButton	boolean	true	Whether to show the close button in the top-right corner.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Header, body, and footer content of the sheet.

SheetHeader / SheetFooter

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Content for the header or footer region.

SheetTitle / SheetDescription

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	Accessible title or description text.