Sheet React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Sheet from @/components/ui/sheet.

import { SlidersHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Sheet, SheetClose } from "@/components/ui/sheet"

export function ListingFilters({ results, onReset }: { results: number; onReset: () => void }) {
  return (
    <Sheet
      side="right"
      mobileSide="bottom"
      title="Filters"
      description="Biciclete · Cluj-Napoca"
      shortcut="mod+j"
      trigger={
        <Button variant="soft" leftIcon={<SlidersHorizontal />}>
          Filters
        </Button>
      }
      footer={
        <>
          <Button variant="ghost" onClick={onReset}>
            Reset
          </Button>
          <SheetClose asChild>
            <Button>Show {results} results</Button>
          </SheetClose>
        </>
      }
    >
      <p className="text-sm text-muted-foreground">Price, condition and delivery.</p>
    </Sheet>
  )
}

Props

• defaultOpendefault false
  boolean

  Starts open (uncontrolled). Pass open and onOpenChange instead to control it.

• open
  boolean

  Controlled open state. It lives in the root, so crossing 768px with mobileSide keeps the sheet open.

• onOpenChange
  (open: boolean) => void

  Called when the sheet opens or closes: the trigger, a swipe, Escape, an outside click, the X or the shortcut.

• titledefault ""
  ReactNode

  The header title, also the sheet's accessible name. Without one, screen readers hear a hidden “Panel”; always pass a real one. The demo shows its sample while this is empty.

• descriptiondefault ""
  ReactNode

  A quieter line under the title, linked with aria-describedby. Without one the sheet opts out of the description (Radix's aria-describedby={undefined}).

• hideTitledefault false
  boolean

  Keeps the title for screen readers only, for sheets that carry their own header (a menu with a logo). The body then starts at the top, so leave room for the X in its first row.

• closeLabeldefault "Close"
  string

  aria-label of the X button. Translate it together with the rest of your copy.

• trigger
  ReactNode

  The element that opens the sheet, rendered with asChild: a single element that takes a ref, like a Button. It gets aria-keyshortcuts when a shortcut is set.

• children
  ReactNode

  The body. It scrolls on its own (overscroll contained), pads the home indicator when it is the last part, and drives the header and footer hairlines.

• footer
  ReactNode

  Actions pinned under the body. Put the primary action last: it lands on the right from 640px and on top when the buttons stack full width on a phone.

• sidedefault "right"
  "right" | "left" | "top" | "bottom"

  The edge it slides in from. Left and right are logical, so an rtl page mirrors them (the swipe too). Top and bottom sheets get a grab handle on touch screens.

• mobileSidedefault "auto"
  "auto" | "right" | "left" | "top" | "bottom"

  The side below 768px. auto keeps side (a nav menu from the left stays on the left); bottom turns a right filter panel into a bottom sheet on phones.

• sizedefault "md"
  "sm" | "md" | "lg" | "xl" | "full"

  Left and right: 320 / 400 / 540 / 720px wide, capped so a 48px sliver of the page stays tappable on a phone, or the whole screen. Top and bottom: as tall as the content up to 50 / 70 / 85 / 92% of the screen, or all of it. full always shows the X.

• variantdefault "attached"
  "attached" | "floating"

  attached sits flush on its edge and rounds only the inner corners. floating hovers 8px off the screen edges and the safe areas with every corner rounded.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Corner size: 0 / 12 / 16 / 24px. Attached top and bottom sheets take the bottom-sheet corner, 28px, at lg. Any other value falls back to lg.

• overlaydefault true
  boolean

  The dim backdrop. Turned off, a modal sheet still locks the page and closes on an outside click; it just does not darken it.

• showClosedefault true
  boolean

  The X in the top corner (a 44px target on touch). Always shown at size full, where no page is left to tap.

• showHandledefault true
  boolean

  The grab handle of top and bottom sheets. It only appears on touch screens while the sheet can be swiped.

• modaldefault true
  boolean

  false: no overlay, no focus trap, no scroll lock. The page stays usable and clicks on it never close the sheet, like an inspector next to a list.

• dismissibledefault true
  boolean

  Outside clicks, Escape, swipes and the shortcut close it. false leaves only the X and your own actions (a SheetClose or setting open).

• swipeToClosedefault true
  boolean

  On touch screens, drag it toward its edge to close: side panels from anywhere on them, top and bottom sheets from the handle or header. Past a quarter of its size or a flick closes, less springs back. Mark a child data-sheet-no-drag to keep its own gestures.

• shortcutdefault ""
  string

  A key combo in mod+k notation (⌘ on Apple, Ctrl elsewhere) that toggles the sheet from anywhere. The trigger gets aria-keyshortcuts. Empty binds nothing.

• container
  HTMLElement | null

  Portal target. Defaults to document.body.

• classNames
  Partial<Record<"overlay" | "content" | "header" | "title" | "description" | "body" | "footer" | "close" | "handle", string>>

  Extra classes for the parts. The header, title, description, body and footer parts read theirs from the content, so this works with the parts API too.

• className
  string

  Extra classes for the panel (sheet-content). Set any corner with [--sheet-radius:20px].

Parts

FAQ

Used in

More React overlay components