SideSheet

Side sheets show secondary content anchored to the side of the screen.

Developer experience

open is controlled; defaultOpen initializes uncontrolled usage. Defaults to true.
variant="modal" renders into a portal on document.body by default; pass container to portal elsewhere (for example to confine a demo to a bounded box). It renders nothing on the server and during the first client render, then portals once mounted.
divider is ignored for variant="modal", which never renders one.
The open/close width and backdrop transitions are implemented once with Motion JavaScript in @udixio/core/dom, so React and Angular share the same timing, reduced-motion behavior, and cleanup. No motion/react is used.

variant="modal" renders role="dialog" and aria-modal, traps focus by making every other child of document.body (or container) inert while open, moves initial focus into the panel, closes on Escape, restores focus to the previously focused element on close, and locks body scroll.
Whichever variant, the panel is inert and aria-hidden while closed, and reduced-motion preference keeps state changes immediate and fully perceivable.
variant="standard" is persistent layout chrome: no dialog role, focus trap, or Escape handling.
title, when provided, labels the panel through aria-labelledby.

children stay mounted while closed, since the panel is always present for its open/close animation; expensive subtrees are not torn down until the SideSheet itself unmounts.
The open/close animation transitions width, not a transform, so it can be less smooth for a very large panel or on a low-powered device.

React props
Name	Type	Required	Default	Description
`className`	`string \| Partial<Record<"container" \| "content" \| "header" \| "title" \| "divider" \| "sideSheet" \| "closeButton" \| "overlay", string>> \| ClassNameComponent<SideSheetInterface>`	No	`—`	Root classes (string), static element classes (object), or state-aware element classes (function).
`variant`	`SideSheetVariant`	No	`'standard'`	Rendering mode: `'standard'` for persistent layout chrome, `'modal'` for a dismissible overlay.
`title`	`string`	No	`—`	Headline displayed in the side sheet header.
`position`	`SideSheetPosition`	No	`'right'`	Edge of the screen the panel is anchored to.
`open`	`boolean`	No	`—`	Controlled open state.
`defaultOpen`	`boolean`	No	`true`	Initial open state when uncontrolled.
`closeIcon`	`Icon`	No	`iClose`	Icon for the built-in close button.
`divider`	`boolean`	No	`—`	Show the trailing divider. Defaults to `true` for the standard variant. Ignored for `variant="modal"`, which never renders a divider.
`transition`	`Transition`	No	`—`	Motion transition shared by every framework for the open/close width and opacity animation.
`onOpenChange`	`(open: boolean) => void`	No	`—`	Notifies an accepted open-state request.
`container`	`Element`	No	`—`	Portal target for `variant="modal"`. Defaults to `document.body`.