Sheet

The Sheet component is a drawer/modal-like UI element that supports multiple positions and customization options.

Examples

Basic Sheet

Preview

Code

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
} from '@hv/ui/sheet';
import { Button } from '@hv/ui/button';

<Sheet>
  <SheetTrigger asChild>
    <Button>Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>This is the sheet description.</SheetDescription>
    </SheetHeader>
    <div className='p-4'>This is the sheet content.</div>
  </SheetContent>
</Sheet>;

Left Sheet

Preview

Code

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
} from '@hv/ui/sheet';
import { Button } from '@hv/ui/button';

<Sheet>
  <SheetTrigger asChild>
    <Button>Open Left Aligned Sheet</Button>
  </SheetTrigger>
  <SheetContent side='left'>
    <SheetHeader>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>This is the sheet description.</SheetDescription>
    </SheetHeader>
    <div className='p-4'>This is the sheet content.</div>
  </SheetContent>
</Sheet>;

Props

Name	Description	Type
side	Determines which side the sheet slides in from	left right
closeTitle	Aria-label for the close button	String
className	Additional classes for custom styling	String
closeClassName	Custom classes for the close button	String
container	Specifies the container for the sheet portal	HTMLElement
children	The content of the sheet	ReactNode

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides.