A sheet component that slides in from the edges of the screen, ideal for sidebars, settings panels, and detail views.
Installation
npm install @kuzenbo/core
Usage
Basic Example
import { Sheet, Button } from "@kuzenbo/core";
export default function SheetExample() {
return (
<Sheet>
<Sheet.Trigger render={<Button variant="outline" />}>
Open customer profile
</Sheet.Trigger>
<Sheet.Content side="right">
<Sheet.Header>
<Sheet.Title>Customer profile</Sheet.Title>
<Sheet.Description>
Review lifecycle details before escalating a support ticket.
</Sheet.Description>
</Sheet.Header>
<Sheet.Footer>
<Sheet.Close render={<Button variant="outline" />}>Close</Sheet.Close>
<Button>Escalate case</Button>
</Sheet.Footer>
</Sheet.Content>
</Sheet>
);
}
Left Side Sheet
import { Sheet, Button } from "@kuzenbo/core";
export default function LeftSheetExample() {
return (
<Sheet>
<Sheet.Trigger render={<Button variant="outline" />}>
Open navigation
</Sheet.Trigger>
<Sheet.Content side="left">
<Sheet.Header>
<Sheet.Title>Navigation</Sheet.Title>
</Sheet.Header>
</Sheet.Content>
</Sheet>
);
}
Composed Anatomy
import { Sheet, Button } from "@kuzenbo/core";
export default function ComposedSheet() {
return (
<Sheet>
<Sheet.Trigger render={<Button variant="outline" />}>
Open panel
</Sheet.Trigger>
<Sheet.Portal>
<Sheet.Backdrop />
<Sheet.Viewport>
<Sheet.Popup side="right">
<Sheet.Header>
<Sheet.Title>Panel title</Sheet.Title>
<Sheet.Description>
Panel description.
</Sheet.Description>
</Sheet.Header>
<Sheet.Footer>
<Sheet.Close render={<Button variant="outline" />}>
Close
</Sheet.Close>
<Button>Save</Button>
</Sheet.Footer>
</Sheet.Popup>
</Sheet.Viewport>
</Sheet.Portal>
</Sheet>
);
}
import { Sheet, Button } from "@kuzenbo/core";
export default function SheetWithoutClose() {
return (
<Sheet>
<Sheet.Trigger render={<Button variant="outline" />}>
Open form
</Sheet.Trigger>
<Sheet.Content side="right" showCloseButton={false}>
<Sheet.Header>
<Sheet.Title>Edit settings</Sheet.Title>
</Sheet.Header>
<Sheet.Footer>
<Sheet.Close render={<Button variant="outline" />}>
Cancel
</Sheet.Close>
<Button>Save changes</Button>
</Sheet.Footer>
</Sheet.Content>
</Sheet>
);
}
API Reference
Sheet (Root)
The initial open state when uncontrolled.
The controlled open state of the sheet.
Callback fired when the open state changes.
Sheet.Content
side
'top' | 'right' | 'bottom' | 'left'
default:"'right'"
The side from which the sheet slides in.
Whether to display the close button in the top-right corner.
Additional CSS classes to apply to the sheet popup.
side
'top' | 'right' | 'bottom' | 'left'
default:"'right'"
The side from which the sheet slides in.
Additional CSS classes to apply.
Sheet.Trigger
The element to render as the trigger. Uses Base UI render composition.
Sheet.Title
The title content for the sheet.
Sheet.Description
The description content for the sheet.
The header content, typically contains Title and Description.
The footer content, typically contains action buttons.
Sheet.Close
The element to render as the close trigger.
Component Parts
The Sheet component is built from several composable parts:
Sheet - Root component that manages stateSheet.Trigger - Opens the sheetSheet.Portal - Portals the sheet content to document.bodySheet.Backdrop - The overlay backdropSheet.Viewport - Positions the sheetSheet.Popup - The sheet container with slide animationSheet.Content - Convenience wrapper that includes Portal, Backdrop, Viewport, and PopupSheet.Header - Styled header containerSheet.Title - Accessible titleSheet.Description - Accessible descriptionSheet.Footer - Styled footer containerSheet.Close - Closes the sheetSheet.Overlay - Alternative backdrop component
Accessibility
- Sheet implements the WAI-ARIA Dialog pattern
- Focus is trapped within the sheet when open
- Pressing Escape closes the sheet
- Focus returns to the trigger element when closed
- Title and Description are automatically linked for screen readers