Sheet

A simplified wrapper for Shadcn Sheet with flexible option handling and automatic type conversion

Installation

npx shadcn@latest add @glrk-ui/sheet

If you haven't set up the prerequisites yet, check out Prerequest section.

Copy and paste the following code into your project.

ui/sheet.tsx

"use client"

import * as React from "react"
import { Dialog as SheetPrimitive } from "@base-ui/react/dialog"
import { XIcon } from "lucide-react"

import { cn } from "@/lib/utils"

import { Button } from "@/components/ui/button"

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

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

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

function SheetPortal(props: SheetPrimitive.Portal.Props) {
  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
}

function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
  return (
    <SheetPrimitive.Backdrop
      data-slot="sheet-overlay"
      className={cn(
        "fixed inset-0 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
        className
      )}
      {...props}
    />
  )
}

function SheetContent({
  className,
  children,
  side = "right",
  showCloseButton = true,
  ...props
}: SheetPrimitive.Popup.Props & {
  side?: "top" | "right" | "bottom" | "left"
  showCloseButton?: boolean
}) {
  return (
    <SheetPortal>
      <SheetOverlay />
      <SheetPrimitive.Popup
        data-slot="sheet-content"
        data-side={side}
        className={cn(
          "fixed flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
          className
        )}
        {...props}
      >
        {children}
        {showCloseButton && (
          <SheetPrimitive.Close
            data-slot="sheet-close"
            render={
              <Button
                variant="ghost"
                className="absolute top-3 right-3"
                size="icon-sm"
              />
            }
          >
            <XIcon
            />
            <span className="sr-only">Close</span>
          </SheetPrimitive.Close>
        )}
      </SheetPrimitive.Popup>
    </SheetPortal>
  )
}

function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-header"
      className={cn("flex flex-col gap-0.5 p-4", className)}
      {...props}
    />
  )
}

function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="sheet-footer"
      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
      {...props}
    />
  )
}

function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
  return (
    <SheetPrimitive.Title
      data-slot="sheet-title"
      className={cn(
        "text-base font-medium text-foreground",
        className
      )}
      {...props}
    />
  )
}

function SheetDescription({
  className,
  ...props
}: SheetPrimitive.Description.Props) {
  return (
    <SheetPrimitive.Description
      data-slot="sheet-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

type SheetFooterWrapperProps = {
  cancel?: React.ReactNode
  action?: React.ReactNode
  footerCls?: string
  actionCls?: string
  cancelCls?: string
  onAction?: () => void
  onCancel?: () => void
}

function SheetFooterWrapper({
  cancel,
  action,
  footerCls,
  actionCls,
  cancelCls,
  onAction = () => { },
  onCancel = () => { },
}: SheetFooterWrapperProps) {
  return (
    <SheetFooter className={footerCls}>
      {
        cancel &&
        <SheetClose
          render={
            <Button
              variant="secondary"
              onClick={onCancel}
              className={cn("border", cancelCls)}
            >
              {cancel}
            </Button>
          }
        />
      }

      {
        action &&
        <Button
          onClick={onAction}
          className={cn(actionCls)}
        >
          {action}
        </Button>
      }
    </SheetFooter>
  )
}

type SheetWrapperProps = {
  title?: React.ReactNode
  trigger?: React.ReactNode
  children?: React.ReactNode
  description?: React.ReactNode
  triggerCls?: string
  descriptionCls?: string
  contentCls?: string
  headerCls?: string
  titleCls?: string
  side?: "top" | "bottom" | "right" | "left"
} & SheetFooterWrapperProps

function SheetWrapper({
  trigger,
  title,
  description,
  children,
  contentCls,
  headerCls,
  titleCls,
  descriptionCls,

  cancel = "Cancel",
  action,
  triggerCls,
  footerCls,
  actionCls,
  cancelCls,
  onAction,
  onCancel,

  side = "right",
  ...props
}: React.ComponentProps<typeof SheetPrimitive.Root> & SheetWrapperProps) {
  return (
    <Sheet {...props}>
      {
        trigger &&
        <SheetTrigger className={cn(triggerCls)}>{trigger}</SheetTrigger>
      }

      <SheetContent side={side} className={cn(contentCls)}>
        <SheetHeader className={cn(headerCls)}>
          <SheetTitle className={cn(titleCls)}>{title}</SheetTitle>
          {description && (
            <SheetDescription className={cn(descriptionCls)}>
              {description}
            </SheetDescription>
          )}
        </SheetHeader>

        {children}

        {
          (!!cancel || !!action) &&
          <SheetFooterWrapper
            cancel={cancel}
            action={action}
            footerCls={footerCls}
            actionCls={actionCls}
            cancelCls={cancelCls}
            onAction={onAction}
            onCancel={onCancel}
          />
        }
      </SheetContent>
    </Sheet>
  )
}

export {
  Sheet,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
  SheetWrapper,
  SheetFooterWrapper,
}

Usage

Basic

import { SheetWrapper } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

export function Basic() {
  return (
    <>
      <SheetWrapper
        trigger={<Button>Delete</Button>}
        title="Are you absolutely sure?"
        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
      />
    </>
  )
}

Controlled

import { useState } from "react"
import { SheetWrapper } from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

export function Controlled() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <SheetWrapper
        open={open}
        onOpenChange={setOpen}
        trigger={<Button>Controlled</Button>}
        onAction={() => setOpen(false)}
        title="Are you absolutely sure?"
        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
      />
    </>
  )
}

// Programaticaly open model without trigger
export function Controlled2() {
  const [open, setOpen] = useState(false)
 
  const updateOpen = () => setOpen(p => !p)

  return (
    <>
      <Button onClick={updateOpen}>Controlled 2</Button>

      <SheetWrapper
        open={open}
        onOpenChange={updateOpen}
        onAction={updateOpen}
        title="Are you absolutely sure?"
        description="This action cannot be undone. This will permanently delete your account and remove your data from our servers."
      />
    </>
  )
}

Custom

export function Custom() {
  return (
    <SheetWrapper
      trigger={<Button>Delete</Button>}
      title="Some Custom Modal"

      // to remove footer make cancel empty
      cancel=""
    >
      <div>...</div>
    </SheetWrapper>
  )
}

Reference

SheetFooterWrapper

Prop

Type

SheetWrapper

Prop

Type

Properties of SheetFooterWrapper can be passed directly.

Sheet

On this page