Sheet

The Sheet component is used to display content in a panel that slides in from the side of the screen. It is useful for presenting forms, menus, or additional details without navigating away from the current page.

Usage

import { 
    Sheet, 
    SheetBody, 
    SheetClose, 
    SheetContent, 
    SheetDescription, 
    SheetFooter, 
    SheetTitle, 
    SheetTrigger 
    } from "@aqqo/aqqo-ui";

<Sheet>
  <SheetTrigger asChild>
    <Button variant="secondary">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetBody>
      <SheetTitle>Sheet Title</SheetTitle>
      <SheetDescription>Additional details or instructions.</SheetDescription>
 
      {/* Your content goes here */}
 
    </SheetBody>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="secondary">Close</Button>
      </SheetClose>
      <Button variant="primary">Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Examples

Props

Sheet wraps Radix Dialog. Sheet (Root): Inherits Radix Dialog.Root. SheetTrigger, SheetClose: Inherit Radix equivalents. SheetContent: Custom props: side ("left" | "right", default: "right"), className. Inherits Radix Content. SheetTitle, SheetDescription: Inherit Radix equivalents plus className. SheetBody, SheetFooter: className, children, plus div HTML attributes.

Slide in from Left

You can control from which side the Sheet slides in by using the side prop on Sheet.Content.

<Sheet>
  <SheetTrigger asChild>
    <Button variant="secondary">Open Sheet</Button>
  </SheetTrigger>
  <SheetContent side="left">
    {/* Content remains the same */}
  </SheetContent>
</Sheet>