Sheet
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
SheetTriggerPrimitive 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 top, right, bottom, or left.
Controlled State
Control the sheet's open state from your component code.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
Included by default
role="dialog", title/description ARIA links, focus trap, scroll lock, and direction-aware animations.Keyboard Shortcuts
Navigate and interact with sheets using keyboard.
Open sheetEnter / Space
Close sheetEscape
Navigate between elementsTab
API Reference
Component properties and parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Open | bool? | — | Controls whether the sheet is open (controlled mode). |
| OpenChanged | EventCallback<bool> | — | Callback invoked when the open state changes. |
| DefaultOpen | bool | false | Initial open state (uncontrolled mode). |
| Side | SheetSide | SheetSide.Right | The side from which the sheet slides in. |
| Modal | bool | true | Whether the sheet is modal. |
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