Sheet

Extends the Dialog to display content that complements the main content of the screen.

Usage

SSheet() {
  SSheetTrigger() { SButton({ text: 'Open', variant: 'outline' }) }
  SSheetContent({ side: 'right' }) {
    SSheetHeader() {
      SSheetTitle({ text: 'Edit profile' })
      SSheetDescription({ text: 'Make changes to your profile here.' })
    }
    TextInput({ placeholder: 'Name' })
    SSheetFooter() {
      SSheetClose() { SButton({ text: 'Save changes' }) }
    }
  }
}

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SSheet

shadcn-vue Sheet: a dialog that slides in from an edge.

Prop	Type	Default	Description
open!!	boolean | undefined	undefined
defaultOpen	boolean	false

Event	Type	Default	Description
onOpenChange	(open: boolean) => void	() => { }

Slots: children (trailing closure)

SSheetTrigger

Slots: children (trailing closure)

SSheetClose

Slots: children (trailing closure)

SSheetContent

Edge panel: bg-background shadow-lg, left/right w-3/4 sm:max-w-sm, slides in from side.

Prop	Type	Default	Description
side	SheetSide SheetSide = 'top' | 'right' | 'bottom' | 'left'	'right'
showCloseButton	boolean	true
dismissOnOutside	boolean	true
panelWidth	number	0	Width for left/right sheets in vp (default: 75% of the window, max 384).
tokens	SparkSurfaceTokens	{}	Per-instance surface token overrides (instance → theme tokens → recipe), see {@link SparkSurfaceTokens}.

Slots: children (trailing closure)

SSheetHeader

Slots: children (trailing closure)

SSheetFooter

Actions area. In left / right sheets it is pushed to the bottom (shadcn mt-auto).

Slots: children (trailing closure)

SSheetTitle

Prop	Type	Default	Description
text	ResourceStr	''

SSheetDescription

Prop	Type	Default	Description
text	ResourceStr	''