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
Prop	Type	Values	Description
children	any	-	Content of the Sheet, including triggers and content.
...props	any	-	Additional props are passed to the root element.

SheetContent

SheetContent props
Prop	Type	Values	Description
Side	string	"left" \| "right" (default: "right")	Determines which side the Sheet slides in from.
children	any	-	Content inside the Sheet panel.
className	string	-	Additional CSS classes for custom styling.
...props	any	-	Additional props are passed to the content element.

SheetTrigger

SheetTrigger props
Prop	Type	Values	Description
asChild	boolean	true \| false (default: false)	If true, the first child is used as the trigger. Useful for custom triggers.
children	any	-	The trigger element(s).
...props	any	-	Additional props are passed to the trigger element.

SheetTitle

SheetTitle props
Prop	Type	Values	Description
children	any	-	The title text or elements.
className	string	-	Additional CSS classes for custom styling.
...props	any	-	Additional props are passed to the title element.

SheetDescription

SheetDescription props
Prop	Type	Values	Description
children	any	-	The main content of the Sheet.
className	string	-	Additional CSS classes for custom styling.
...props	any	-	Additional props are passed to the body element.

SheetFooter

SheetFooter props
Prop	Type	Values	Description
children	any	-	Content of the footer, usually buttons.
className	string	-	Additional CSS classes for custom styling.
...props	any	-	Additional props are passed to the footer element.

SheetClose

SheetClose props
Prop	Type	Values	Description
asChild	boolean	true \| false (default: false)	If true, the first child is used as the close trigger. Useful for custom triggers.
children	any	-	The close trigger element(s).
...props	any	-	Additional props are passed to the close element.