Skip to content

Sheet

Base UI

A side panel you can swipe away, for detail that shouldn't leave the page.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/sheet.json

Also installs @base-ui/react.

Usage

import { Sheet, SheetContent, SheetTrigger } from "@/components/spotcheck/sheet"
import { Button } from "@/components/spotcheck/button"

<Sheet swipeDirection="right">
  <SheetTrigger render={<Button />}>Run details</SheetTrigger>
  <SheetContent title="R-2041" description="support-qa, atlas-l">…</SheetContent>
</Sheet>

Props

  • title * RequiredstringDefault —
  • descriptionstringDefault —
  • classNamestringDefault —

Keyboard

EscClose and return focus

Reduced motion

The sheet appears at once, with no slide.