Sheet

Shows a swipeable panel that slides in from the edge of the screen.

sheet-basic-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import {  Sheet,  SheetBody,  SheetClose,  SheetDescription,  SheetFooter,  SheetHandle,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/vip-ui/sheet";export function SheetBasicDemo() {  return (    <SheetTrigger>      <Button>View order</Button>      <Sheet>        <SheetHandle />        <SheetHeader>          <SheetTitle>Order summary</SheetTitle>          <SheetDescription>            Review your order before checkout.          </SheetDescription>        </SheetHeader>        <SheetBody>          <p className="text-sm">Canvas notebook · $18.00</p>          <p className="mt-2 text-sm text-muted-foreground">Shipping · $4.00</p>        </SheetBody>        <SheetFooter>          <SheetClose variant="outline">Close</SheetClose>        </SheetFooter>      </Sheet>    </SheetTrigger>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-sheet.json

Composition

SheetTrigger
Owns the open state.
- Button
- Sheet
  - SheetHandle
    In a top sheet, put it last.
  - SheetHeader
    - SheetTitle
    - SheetDescriptionOptional
  - SheetBody
    Scrolls when the content does not fit.
  - SheetFooter
    - SheetClose
      Can also go in SheetHeader.

Sizes

sheet-sizes-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import {  Sheet,  SheetBody,  SheetClose,  SheetDescription,  SheetHandle,  SheetHeader,  type SheetSize,  SheetTitle,  SheetTrigger,} from "@/components/vip-ui/sheet";const sizes: { size: SheetSize; label: string; width: string }[] = [  { size: "sm", label: "Small", width: "20rem wide." },  { size: "md", label: "Medium", width: "26rem wide." },  { size: "lg", label: "Large", width: "36rem wide." },  { size: "xl", label: "Extra large", width: "48rem wide." },  { size: "full", label: "Full screen", width: "Fills the screen." },];export function SheetSizesDemo() {  return (    <div className="flex flex-wrap justify-center gap-2">      {sizes.map(({ size, label, width }) => (        <SheetTrigger key={size}>          <Button variant="outline">{label}</Button>          <Sheet position="right" size={size}>            <SheetHandle />            <SheetHeader>              <SheetTitle>{label}</SheetTitle>              <SheetDescription>{width}</SheetDescription>              <SheetClose />            </SheetHeader>            <SheetBody className="grid">              <div className="grid min-h-28 place-items-center rounded-lg border border-dashed border-border text-sm text-muted-foreground">                Content              </div>            </SheetBody>          </Sheet>        </SheetTrigger>      ))}    </div>  );}

Inset

sheet-inset-demo.tsx

"use client";import {  ChatCircleIcon,  CheckCircleIcon,  UserPlusIcon,} from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";import {  Sheet,  SheetBody,  SheetClose,  SheetDescription,  SheetFooter,  SheetHandle,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/vip-ui/sheet";const notifications = [  {    icon: ChatCircleIcon,    title: "Leo commented on Onboarding flow",    time: "2 min ago",  },  {    icon: UserPlusIcon,    title: "Ana joined the Design team",    time: "1 hour ago",  },  {    icon: CheckCircleIcon,    title: "Release 2.4 passed all checks",    time: "Yesterday",  },];export function SheetInsetDemo() {  return (    <div className="flex flex-wrap justify-center gap-2">      <SheetTrigger>        <Button variant="outline">Notifications</Button>        <Sheet position="right" size="sm" inset>          <SheetHandle />          <SheetHeader>            <SheetTitle>Notifications</SheetTitle>            <SheetDescription>3 new since your last visit.</SheetDescription>            <SheetClose />          </SheetHeader>          <SheetBody>            <ul className="grid gap-1">              {notifications.map(({ icon: Icon, title, time }) => (                <li key={title} className="flex min-w-0 gap-3 rounded-lg p-2">                  <span className="grid size-8 shrink-0 place-items-center rounded-full bg-muted text-muted-foreground">                    <Icon size={16} aria-hidden="true" />                  </span>                  <span className="grid min-w-0 gap-0.5">                    <span className="text-sm">{title}</span>                    <span className="text-xs text-muted-foreground">                      {time}                    </span>                  </span>                </li>              ))}            </ul>          </SheetBody>          <SheetFooter>            <SheetClose variant="outline">Mark all as read</SheetClose>          </SheetFooter>        </Sheet>      </SheetTrigger>      <SheetTrigger>        <Button variant="outline">Quick actions</Button>        <Sheet size="sm" inset>          <SheetHandle />          <SheetHeader>            <SheetTitle>Quick actions</SheetTitle>          </SheetHeader>          <SheetBody className="grid gap-1 px-3 pb-4">            {["Duplicate", "Move to folder", "Copy link"].map((action) => (              <SheetClose                key={action}                variant="ghost"                className="justify-start px-3"              >                {action}              </SheetClose>            ))}          </SheetBody>        </Sheet>      </SheetTrigger>    </div>  );}

Snap points

Set snapPoints to the visible size at each stop. The sheet opens at the first stop.

sheet-demo.tsx

"use client";import { Button } from "@/components/vip-ui/button";import {  Sheet,  SheetBody,  SheetClose,  SheetDescription,  SheetFooter,  SheetHandle,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/vip-ui/sheet";export function SheetDemo() {  return (    <SheetTrigger>      <Button>Resize order</Button>      <Sheet className="h-[60dvh]" snapPoints={["100%", "40dvh"]}>        <SheetHandle />        <SheetHeader>          <SheetTitle>Order summary</SheetTitle>          <SheetDescription>            Drag the handle or use the arrow keys to change the sheet height.          </SheetDescription>          <SheetClose />        </SheetHeader>        <SheetBody>          <dl className="grid grid-cols-[1fr_auto] gap-y-3 rounded-lg bg-muted p-4 text-sm">            <dt>Canvas notebook</dt>            <dd>$18.00</dd>            <dt>Shipping</dt>            <dd>$4.00</dd>            <dt className="border-t border-border pt-3 font-semibold">Total</dt>            <dd className="border-t border-border pt-3 font-semibold">              $22.00            </dd>          </dl>        </SheetBody>        <SheetFooter>          <SheetClose variant="outline">Close</SheetClose>        </SheetFooter>      </Sheet>    </SheetTrigger>  );}

Edge placement

Swipe the sheet or drag the handle toward its edge to close it. Also install Checkbox group.

sheet-placement-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Checkbox } from "@/components/vip-ui/checkbox";import { CheckboxGroup } from "@/components/vip-ui/checkbox-group";import {  Sheet,  SheetBody,  SheetClose,  SheetDescription,  SheetFooter,  SheetHandle,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/vip-ui/sheet";const collections = ["Recent files", "Shared with me", "Starred"];const statuses = ["In progress", "Completed", "On hold"];export function SheetPlacementDemo() {  const [statusesShown, setStatusesShown] = useState(["In progress"]);  return (    <div className="flex flex-wrap justify-center gap-2">      <SheetTrigger>        <Button variant="outline">Shortcuts</Button>        <Sheet position="top">          <SheetHeader>            <SheetTitle>Keyboard shortcuts</SheetTitle>            <SheetDescription>              Quick reference for the workspace.            </SheetDescription>            <SheetClose />          </SheetHeader>          <SheetBody>            <dl className="grid grid-cols-[1fr_auto] gap-x-8 gap-y-3 text-sm">              <dt>Search files</dt>              <dd>                <kbd className="rounded border border-border px-2 py-1">                  Ctrl K                </kbd>              </dd>              <dt>New file</dt>              <dd>                <kbd className="rounded border border-border px-2 py-1">                  Ctrl N                </kbd>              </dd>            </dl>          </SheetBody>          <SheetHandle />        </Sheet>      </SheetTrigger>      <SheetTrigger>        <Button variant="outline">Collections</Button>        <Sheet position="left">          <SheetHandle />          <SheetHeader>            <SheetTitle>Collections</SheetTitle>            <SheetDescription>Open a file collection.</SheetDescription>            <SheetClose />          </SheetHeader>          <SheetBody className="grid content-start gap-1 px-3">            {collections.map((item) => (              <SheetClose                key={item}                variant="ghost"                className="justify-start px-3"              >                {item}              </SheetClose>            ))}          </SheetBody>        </Sheet>      </SheetTrigger>      <SheetTrigger>        <Button variant="outline">Filter projects</Button>        <Sheet position="right">          <SheetHandle />          <SheetHeader>            <SheetTitle>Filter projects</SheetTitle>            <SheetDescription>Choose which statuses to show.</SheetDescription>            <SheetClose />          </SheetHeader>          <SheetBody>            <CheckboxGroup              label="Status"              value={statusesShown}              onChange={setStatusesShown}            >              {statuses.map((status) => (                <Checkbox key={status} value={status}>                  {status}                </Checkbox>              ))}            </CheckboxGroup>          </SheetBody>          <SheetFooter>            <SheetClose variant="default">Show results</SheetClose>          </SheetFooter>        </Sheet>      </SheetTrigger>    </div>  );}

Form

Put the form around SheetBody and SheetFooter so the footer stays in view. Also install Form, Text field, Text area, Select and Switch.

sheet-form-demo.tsx

"use client";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Form } from "@/components/vip-ui/form";import { Select } from "@/components/vip-ui/select";import {  Sheet,  SheetBody,  SheetClose,  SheetDescription,  SheetFooter,  SheetHandle,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/vip-ui/sheet";import { Switch } from "@/components/vip-ui/switch";import { TextArea } from "@/components/vip-ui/text-area";import { TextField } from "@/components/vip-ui/text-field";export function SheetFormDemo() {  const [isOpen, setIsOpen] = useState(false);  return (    <SheetTrigger isOpen={isOpen} onOpenChange={setIsOpen}>      <Button variant="outline">Edit project</Button>      <Sheet position="right">        <SheetHandle />        <SheetHeader>          <SheetTitle>Edit project</SheetTitle>          <SheetDescription>Changes apply to all members.</SheetDescription>          <SheetClose />        </SheetHeader>        <Form          className="contents"          onSubmit={(event) => {            event.preventDefault();            setIsOpen(false);          }}        >          <SheetBody className="grid content-start gap-4">            <TextField              name="name"              label="Name"              defaultValue="Onboarding flow"              isRequired            />            <TextArea              name="summary"              label="Summary"              rows={4}              defaultValue="New sign-up, workspace setup, and the first-run tour."            />            <Select              name="status"              label="Status"              defaultValue="progress"              options={[                { id: "progress", name: "In progress" },                { id: "review", name: "In review" },                { id: "done", name: "Completed" },              ]}            />            <TextField name="owner" label="Owner" defaultValue="Maya Patel" />            <Switch name="public" defaultChecked>              Show to guests            </Switch>          </SheetBody>          <SheetFooter>            <SheetClose variant="outline">Cancel</SheetClose>            <Button type="submit">Save changes</Button>          </SheetFooter>        </Form>      </Sheet>    </SheetTrigger>  );}

Nested sheets

Escape and outside clicks close the top sheet first. Also install Text field.

sheet-nested-demo.tsx

"use client";import { type FormEvent, useState } from "react";import { Button } from "@/components/vip-ui/button";import {  Sheet,  SheetBody,  SheetClose,  SheetDescription,  SheetFooter,  SheetHandle,  SheetHeader,  SheetTitle,  SheetTrigger,} from "@/components/vip-ui/sheet";import { TextField } from "@/components/vip-ui/text-field";export function SheetNestedDemo() {  const [people, setPeople] = useState(["maya@studio.dev", "leo@studio.dev"]);  const [inviting, setInviting] = useState(false);  const invite = (event: FormEvent<HTMLFormElement>) => {    event.preventDefault();    const email = new FormData(event.currentTarget).get("email");    if (typeof email === "string" && !people.includes(email))      setPeople([...people, email]);    setInviting(false);  };  return (    <SheetTrigger>      <Button>Share project</Button>      <Sheet className="h-[min(32rem,85dvh)]">        <SheetHandle />        <SheetHeader>          <SheetTitle>Share project</SheetTitle>          <SheetDescription>People with access can edit.</SheetDescription>          <SheetClose />        </SheetHeader>        <SheetBody>          <ul aria-label="People with access" className="grid gap-2 text-sm">            {people.map((person) => (              <li key={person} className="rounded-lg bg-muted px-3 py-2">                {person}              </li>            ))}          </ul>        </SheetBody>        <SheetFooter>          <SheetTrigger isOpen={inviting} onOpenChange={setInviting}>            <Button>Invite people</Button>            <Sheet className="h-auto">              <SheetHandle />              <form onSubmit={invite} className="flex min-h-0 flex-1 flex-col">                <SheetHeader>                  <SheetTitle>Invite people</SheetTitle>                  <SheetDescription>                    They get an email with a link to the project.                  </SheetDescription>                </SheetHeader>                <SheetBody>                  <TextField                    name="email"                    type="email"                    label="Email"                    isRequired                  />                </SheetBody>                <SheetFooter>                  <SheetClose variant="outline">Cancel</SheetClose>                  <Button type="submit">Send invite</Button>                </SheetFooter>              </form>            </Sheet>          </SheetTrigger>        </SheetFooter>      </Sheet>    </SheetTrigger>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Sheet (opens in a new tab).

Sheet

position: "bottom" | "top" | "left" | "right" | "start" | "end" | "center" = "bottom": The edge the sheet comes from. start and end mirror in right-to-left locales. A top or bottom sheet fits its content up to a maximum height. Set a fixed height with className.
size: "sm" | "md" | "lg" | "xl" | "full" = "md": A left or right sheet is 20rem, 26rem, 36rem, or 48rem wide, and always leaves 3.5rem of the page visible. A top or bottom sheet has a maximum width of 28rem, 42rem, 56rem, or 72rem. full fills the screen.
inset: boolean = false: Moves the sheet 0.5rem in from the screen edges and rounds all corners.
swipeDirection: "bottom" | "top" | "left" | "right" | "start" | "end" | "vertical" | "horizontal": The direction of a swipe or handle drag that closes the sheet. vertical and horizontal close toward either edge. Without it, the direction is the same as position. A center sheet uses vertical.
snapPoints: Array<number | string>: The visible size at each stop. Numbers are pixels. Strings are CSS lengths, and percentages are relative to the sheet. The sheet opens at the first stop. You can always drag it to full size. Below full size, a swipe on SheetBody resizes the sheet.
preventDismissal: boolean = false: Stops swipes, Escape, and outside clicks from closing the sheet. Snap points still work.
isOpen: boolean: Whether the sheet is open, controlled. Without isOpen and defaultOpen, a SheetTrigger can own the state instead. Then the Button inside the SheetTrigger opens the sheet.
defaultOpen: boolean: Whether the sheet is open at first, uncontrolled.
onOpenChange: (isOpen: boolean) => void: Receives the new open state. When a SheetTrigger owns the state, set onOpenChange on the SheetTrigger.
--sheet-stack-scale: number: How much the sheet shrinks while a nested sheet is open. The default is 0.94, or 0.96 for a side sheet. Set it in className. Set 1 to keep the size.
--sheet-stack-x: CSS length: How far the sheet moves horizontally while a nested sheet is open. The default moves a side sheet 0.75rem away from its edge. Other sheets do not move horizontally. Set it in className. Set 0 to keep the position.
--sheet-stack-y: CSS length: How far the sheet moves vertically while a nested sheet is open. The default moves a top or bottom sheet 0.5rem away from its edge. Other sheets do not move vertically. Set it in className. Set 0 to keep the position.

SheetClose

Takes all Button props.

children: ReactNode: Text for the button. Without children, it shows an X icon labeled "Close sheet".
variant: "default" | "secondary" | "outline" | "ghost" | "minimal" | "destructive" = "ghost": Choose default for a primary action, outline for a secondary action, or ghost for dismissal.
iconOnly: boolean: Makes the button a square for one icon. The default is true without children and false with children.
size: "xs" | "sm" | "md" | "lg" | "xl" = "sm" without children, "md" with children: The Button size. An icon-only close button uses sm to stay compact.