Primitives

Sheet

A panel from the edge of the screen, to create or edit something without losing the list, the filters and the scroll behind it. From the right on a desktop, from the bottom below 640px. The title is required and names it. With unsaved changes, closing asks first, inside the sheet, with focus on keeping them.

view .md

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add sheet

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

sheet.tsx

tsx

import { Sheet, SheetClose, SheetContent, SheetTrigger } from "@/components/entrepta/sheet"

<Sheet dirty={form.formState.isDirty}>
  <SheetTrigger asChild>
    <Button>new entry</Button>
  </SheetTrigger>
  <SheetContent
    title="New entry"
    description="It lands at the top of the list."
    footer={
      <>
        <SheetClose asChild><Button variant="ghost">cancel</Button></SheetClose>
        <Button type="submit" form="entry">save</Button>
      </>
    }
  >
    <form id="entry">…</form>
  </SheetContent>
</Sheet>

Props

Prop	Type	Default	Description
dirty	boolean	false	Unsaved changes: Esc, a click outside and the × ask before closing
side	"right" \| "bottom"	"right"	right becomes a bottom sheet below 640px (SheetContent)
size	"sm" \| "md" \| "lg"	"md"	360, 480 or 640px wide on a desktop (SheetContent)
title	ReactNode	-	The heading and the sheet's name. Required (SheetContent)
footer	ReactNode	-	Actions pinned to the bottom while the body scrolls (SheetContent)
discardPrompt, keepLabel, discardLabel	ReactNode, string, string	-	The words of the question, for another language (SheetContent)
container	HTMLElement \| null	-	Where it renders (SheetContent), such as a device frame. Give that element a transform