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

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>

Props

Sheet

The Sheet component is the root component and extends the functionality of Radix UI's Dialog.

Sheet props
PropTypeValuesDescription
childrenany-Content of the Sheet, including triggers and content.
...propsany-Additional props are passed to the root element.

SheetContent

SheetContent props
PropTypeValuesDescription
Sidestring"left" | "right" (default: "right")Determines which side the Sheet slides in from.
childrenany-Content inside the Sheet panel.
classNamestring-Additional CSS classes for custom styling.
...propsany-Additional props are passed to the content element.

SheetTrigger

SheetTrigger props
PropTypeValuesDescription
asChildbooleantrue | false (default: false)If true, the first child is used as the trigger. Useful for custom triggers.
childrenany-The trigger element(s).
...propsany-Additional props are passed to the trigger element.

SheetTitle

SheetTitle props
PropTypeValuesDescription
childrenany-The title text or elements.
classNamestring-Additional CSS classes for custom styling.
...propsany-Additional props are passed to the title element.

SheetDescription

SheetDescription props
PropTypeValuesDescription
childrenany-The main content of the Sheet.
classNamestring-Additional CSS classes for custom styling.
...propsany-Additional props are passed to the body element.

SheetFooter

SheetFooter props
PropTypeValuesDescription
childrenany-Content of the footer, usually buttons.
classNamestring-Additional CSS classes for custom styling.
...propsany-Additional props are passed to the footer element.

SheetClose

SheetClose props
PropTypeValuesDescription
asChildbooleantrue | false (default: false)If true, the first child is used as the close trigger. Useful for custom triggers.
childrenany-The close trigger element(s).
...propsany-Additional props are passed to the close element.