Sheet

Dialog panel sliding in from any edge.

Installation

npx @noarka/cli add sheet

Usage

tsx

import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Switch } from "@noarka/ui";

tsx

<Sheet>  <SheetTrigger render={<Button>Open menu</Button>} />  <SheetContent side="left">    <SheetHeader>      <SheetTitle>Menu</SheetTitle>      <SheetDescription>Navigate the workspace.</SheetDescription>    </SheetHeader>  </SheetContent></Sheet>

Examples

Left side

Slide in from any edge with the side prop.

Without close button

Hide the corner X with showCloseButton={false}.

API reference

Sheet

Prop	Type	Default
`open` Controlled open state. Use with onOpenChange.	`boolean`	`-`
`defaultOpen` Initially open when uncontrolled.	`boolean`	`false`
`onOpenChange` Called when the sheet opens or closes.	`(open: boolean) => void`	`-`
`onOpenChangeComplete` Called after open or close animations finish.	`(open: boolean) => void`	`-`
`modal` Limit interaction to the sheet while open.	`boolean \| 'trap-focus'`	`true`
`disablePointerDismissal` Keep the sheet open on outside clicks.	`boolean`	`false`

SheetContent

Prop	Type	Default
`side` Edge the panel slides in from.	`"top" \| "right" \| "bottom" \| "left"`	`"right"`
`showCloseButton` Show the corner X close button.	`boolean`	`true`
`render` Polymorphic render prop. Use to render a custom element instead of the default panel.	`ReactElement \| ((props) => ReactNode)`	`-`
`className` Additional classes merged with the default panel styles.	`string`	`-`

SheetTrigger

Prop	Type	Default
`render` Render a custom trigger element, e.g. render={<Button>Open sheet</Button>}.	`ReactElement \| ((props) => ReactNode)`	`-`
`disabled` Disable the trigger.	`boolean`	`false`

SheetClose

Prop	Type	Default
`render` Render a custom close control. Must live inside the sheet.	`ReactElement \| ((props) => ReactNode)`	`-`

SheetHeader

Prop	Type	Default
`className` Additional classes. Pairs with SheetTitle and SheetDescription.	`string`	`-`

SheetTitle

Prop	Type	Default
`className` Additional classes merged with the title styles.	`string`	`-`

SheetDescription

Prop	Type	Default
`className` Additional classes merged with the muted description styles.	`string`	`-`

SheetFooter

Prop	Type	Default
`className` Additional classes. Pinned to the panel bottom via mt-auto.	`string`	`-`