shadcn.io is not affiliated with official shadcn/ui

Shadcn Sheet for React

Content that slides in from the screen edge.

PreviewCode

Installation

bunx --bun shadcn@latest add https://kit.dev/r/base/sheet.json

npx shadcn@latest add https://kit.dev/r/base/sheet.json

pnpm dlx shadcn@latest add https://kit.dev/r/base/sheet.json

yarn shadcn@latest add https://kit.dev/r/base/sheet.json

This component depends on Button. Install it first if you haven't already.

Install the following dependencies:

bun add @base-ui/react tailwind-variants lucide-react

npm install @base-ui/react tailwind-variants lucide-react

pnpm add @base-ui/react tailwind-variants lucide-react

yarn add @base-ui/react tailwind-variants lucide-react

Copy and paste the following code into your project.

components/ui/sheet.tsx

"use client";

import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
import { XIcon } from "lucide-react";
import type React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/base/components/button";

export const Sheet = (props: SheetPrimitive.Root.Props) => (
  <SheetPrimitive.Root data-slot="sheet" {...props} />
);

export const SheetTrigger = (props: SheetPrimitive.Trigger.Props) => (
  <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
);

export const SheetClose = (props: SheetPrimitive.Close.Props) => (
  <SheetPrimitive.Close data-slot="sheet-close" {...props} />

Update the import paths to match your project setup.

Anatomy

SheetTrigger
SheetOverlay
SheetPositioner
SheetContent
SheetTitle
SheetDescription
SheetClose

Usage

import { Button } from "@/components/ui/button";
import { Field, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you&apos;re done.
      </SheetDescription>
    </SheetHeader>
    <div className="grid flex-1 auto-rows-min gap-6 px-4">
      <Field className="grid gap-3">
        <FieldLabel>Name</FieldLabel>
        <Input defaultValue="Pedro Duarte" type="text" />
      </Field>
      <Field className="grid gap-3">
        <FieldLabel>Username</FieldLabel>
        <Input defaultValue="@peduarte" type="text" />
      </Field>
    </div>
    <SheetFooter>
      <Button type="submit">Save changes</Button>
      <SheetClose asChild>
        <Button variant="outline">Close</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Accessibility

Key	Description
`Enter`	Activate the focused control.
`Space`	Activate the focused control.

Demos

Side

Use the side prop on SheetContent to set the edge of the screen where the sheet appears.

PreviewCode

No Close Button

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

PreviewCode

Rtl

Right-to-left sheet. See the RTL configuration guide for document direction.

PreviewCode

API Reference

Sheet

PropType

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean, eventDetails: DialogRoot.ChangeEventDetails) → void

actionsRef?React.RefObject<DialogRoot.Actions | null>

children?React.ReactNode | PayloadChildRenderFunction<Payload>

defaultTriggerId?string | null

disablePointerDismissal?boolean

handle?DialogHandle<Payload>

onOpenChangeComplete?(open: boolean) → void

triggerId?string | null

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"sheet"

data-scope"dialog"

data-part"root"

SheetTrigger

button

PropType

handle?DialogHandle<Payload>

id?string

payload?Payload

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"sheet-trigger"

data-scope"dialog"

data-part"trigger"

SheetOverlay

div

PropType

forceRender?boolean

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"sheet-overlay"

data-scope"dialog"

data-part"backdrop"

data-state"open" | "closed"

SheetTitle

h2

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"sheet-title"

data-scope"dialog"

data-part"title"

SheetDescription

p

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"sheet-description"

data-scope"dialog"

data-part"description"

SheetClose

button

PropType

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"sheet-close"

data-scope"dialog"

data-part"close"

SheetPortal

div

PropType

keepMounted?boolean

asChild?boolean

render?ReactElement | ((props: object, state: object) => ReactElement)

AttributeType

data-slot"sheet-portal"

data-scope"dialog"

data-part"portal"

SheetContent

PropType

showCloseButton?boolean

side?"top" | "right" | "bottom" | "left"

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"sheet-content"

data-scope"dialog"

data-part"root"

data-side?string

SheetHeader

PropType

description?string

title?string

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"sheet-header"

data-scope"dialog"

data-part"root"

SheetFooter

PropType

render?ReactElement | ((props: object, state: object) => ReactElement)

className?string

AttributeType

data-slot"sheet-footer"

data-scope"dialog"

data-part"root"