Skip to content
jezuiMake it yours
← Components

Sheet

Sheet with thoughtful defaults, semantic styling, and editable source.

Open ↗

Make it yours.

Install the editable source and its dependencies into your React + Tailwind project.

Scroll horizontally for long lines
pnpm dlx shadcn@4.0.8 add http://localhost:3000/r/sheet.json

Use it

Scroll horizontally for long lines
"use client";
import {useState} from 'react';
import {Sheet} from '@/components/jez-ui/ui/sheet';
import {Button} from '@/components/jez-ui/ui/button';
import {FormField} from '@/components/jez-ui/ui/form-field';
import {Input} from '@/components/jez-ui/ui/input';
import {Select} from '@/components/jez-ui/ui/select';
import {Textarea} from '@/components/jez-ui/ui/textarea';

export default function Example(){
const [notice,setNotice]=useState('');
return <><Sheet trigger={<Button variant="outline">Open details</Button>} title="Project details" description="Website refresh · PRJ-102"><div className="grid gap-6"><FormField label="Project name"><Input defaultValue="Website refresh"/></FormField><FormField label="Status"><Select label="Status" defaultValue="progress" options={[{label:"In progress",value:"progress"},{label:"In review",value:"review"},{label:"Complete",value:"complete"}]}/></FormField><FormField label="Notes"><Textarea defaultValue="Explore a clearer homepage direction and bring the component previews up to date."/></FormField><Button onClick={()=>setNotice("Project details saved.")}>Save changes</Button></div></Sheet><p role="status">{notice}</p></>;
}

Props & types

Scroll horizontally for long lines
React.ComponentProps<typeof P.Root> & {
  trigger: React.ReactNode;
  title: string;
  description: string;
  children?: React.ReactNode;
  className?: string;
  onConfirm?: () => void;
}

Source

View 2 source files

registry/ui/sheet.tsx

Scroll horizontally for long lines
"use client";
import * as React from "react";
import { Dialog as P } from "radix-ui";
import { X, PanelRight } from "lucide-react";
import { cn } from "./utils";
export function Sheet({
  trigger,
  title,
  description,
  children,
  className,
  onConfirm: _onConfirm,
  ...props
}: React.ComponentProps<typeof P.Root> & {
  trigger: React.ReactNode;
  title: string;
  description: string;
  children?: React.ReactNode;
  className?: string;
  onConfirm?: () => void;
}) {
  return (
    <P.Root {...props}>
      <P.Trigger asChild>{trigger}</P.Trigger>
      <P.Portal>
        <P.Overlay className="jez-overlay fixed inset-0 z-50 bg-black/25 backdrop-blur-[2px]" />
        <P.Content
          className={cn(
            "jez-sheet fixed inset-y-0 right-0 z-50 flex h-dvh w-[min(94vw,460px)] flex-col bg-background text-foreground shadow-2xl",
            className,
          )}
        >
          <div className="flex items-center justify-between border-b border-border px-6 py-4">
            <PanelRight size={17} className="text-muted-foreground" />
            <P.Close
              aria-label="Close"
              className="grid size-8 place-items-center rounded-md text-muted-foreground hover:bg-muted"
            >
              <X size={18} />
            </P.Close>
          </div>
          <div className="min-h-0 flex-1 overflow-y-auto p-6">
            <P.Title className="text-xl font-semibold">{title}</P.Title>
            <P.Description className="mb-8 mt-2 text-sm leading-relaxed text-muted-foreground">
              {description}
            </P.Description>
            {children}
          </div>
        </P.Content>
      </P.Portal>
    </P.Root>
  );
}

registry/ui/utils.ts

Scroll horizontally for long lines
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...values: ClassValue[]) {
  return twMerge(clsx(values));
}

Dependencies

radix-ui@1.6.7 · lucide-react@0.577.0 · clsx@2.1.1 · tailwind-merge@3.5.0

Accessibility & behaviour

Provide meaningful labels and preserve keyboard focus styles. Check contrast when customising theme colours.

Read the accessibility and performance guide →