Sheet Primitive
Headless, unstyled sheet primitive with slide-in animations and full accessibility support.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
SheetTrigger renders its own button element.
With AsChild
Button receives click behavior via TriggerContext.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling.
Different Sides
Sheets can slide in from any side: top, right, bottom, or left.
Controlled State
Control the sheet's open state from your component code.
Modal Behavior
By default, sheets are modal. Clicking overlay or pressing Escape closes the sheet.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
ARIA Attributes
- ✓
role="dialog"for screen readers - ✓
aria-labelledbylinks title to sheet - ✓
aria-describedbylinks description to sheet - ✓ Automatic focus trap and restoration
- ✓ Body scroll lock when sheet is open
- ✓ Portal rendering for proper z-index stacking
- ✓ Direction-aware slide animations
Keyboard Shortcuts
Navigate and interact with sheets using keyboard.
API Reference
Component properties and parameters.
Sheet
Open
Type: bool?
Controls whether the sheet is open (controlled mode).
OpenChanged
Type: EventCallback<bool>
Callback invoked when the open state changes.
DefaultOpen
Type: bool
Default: false
Initial open state (uncontrolled mode).
Side
Type: SheetSide
Default: SheetSide.Right
Options: Top, Right, Bottom, Left
The side from which the sheet slides in.
Modal
Type: bool
Default: true
Whether the sheet is modal (blocks interaction with rest of page).
SheetTrigger
ChildContent
Type: RenderFragment?
Button content that opens the sheet.
SheetPortal
ChildContent
Type: RenderFragment?
Content rendered at document body level for proper stacking.
SheetOverlay
CloseOnClick
Type: bool
Default: true
Whether clicking the overlay closes the sheet.
SheetContent
CloseOnEscape
Type: bool
Default: true
Whether pressing Escape closes the sheet.
TrapFocus
Type: bool
Default: true
Whether to trap focus inside the sheet.
LockScroll
Type: bool
Default: true
Whether to prevent body scroll when sheet is open.
SheetTitle / SheetDescription / SheetClose
ChildContent
Type: RenderFragment?
Content rendered inside the component.
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Sheet Primitive
- ✓ Building a custom design system
- ✓ Need complete control over styling
- ✓ Want to apply your own CSS framework
- ✓ Creating unique visual designs
Use Styled Component
- ● Want shadcn/ui design out of the box
- ● Need quick implementation
- ● Like the default styling
- ● Prefer convention over configuration