Sheet

The Sheet component overlays a modal on the top, left, bottom, or right of the viewport.

Preview

Usage

import { Sheet } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <div>
      <Sheet 
        trigger={ <button>Open Sheet</button> }
        title="Sheet Title"
        description="This is a description of the sheet."
        side="right">
        
          <div>Sheet content goes here.</div>
        
      </Sheet>
    </div>
  );
}

Props

Prop	Description	Required	Value
children	child component(s)	required	component(s)
className	custom style	optional	SCSS or Tailwind
side	side where the sheet appears	optional	string (left/right/top/bottom), default: right
title	sheet title	optional	string
trigger	trigger component	required

Notes

• The Sheet component uses SheetPrimitive from @radix-ui/react-dialog for the sheet functionality.

• The side prop specifies the side of the viewport where the sheet will appear and defaults to 'right'.

• The className prop allows for custom styling to be applied.

• The trigger prop specifies the component that triggers the opening of the sheet.

• The title and description props provide additional context for the sheet.

• The children prop allows for rendering nested components within the sheet.

• For more details, refer to the Shadcn Sheet documentation.