Overlays · Application UI
Sheet
Slide-over panel dialog anchored to any screen edge.
@byronwade/foundation@byronwade/utils@byronwade/button@base-ui/react@phosphor-icons/react
Feature showcase
Installation
Features
7 examples
Default, Sides, With Form, Scrollable, No Close Button, Inset Nested, Nested Steps.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| side | "top" | "right" | "bottom" | "left" | "right" | Edge the sheet slides in from. |
| showCloseButton | boolean | true | Render the corner close button. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| @base-ui/react | npm | Installed from npm. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/sheet.tsx |
| Default example | content/examples/sheet/default.tsx |
| Sides example | content/examples/sheet/sides.tsx |
| With Form example | content/examples/sheet/with-form.tsx |
| Scrollable example | content/examples/sheet/scrollable.tsx |
| No Close Button example | content/examples/sheet/no-close-button.tsx |
| Inset Nested example | content/examples/sheet/inset-nested.tsx |
| Nested Steps example | content/examples/sheet/nested-steps.tsx |