Sheet
A panel that slides over the page for detail or a quick edit without losing the list behind it. It behaves like a dialog: focus stays inside and Escape closes it.
bunx --bun shadcn@4.17.0 add @waimakers/sheet- npm dependencies
- @base-ui/react@1.9.0lucide-react@1.33.0
From the registry
A Base UI slide-over on the raised surface with the overlay shadow and scrim. Supports left, right, top and bottom edges, the brand ease and reduced-motion parity. size=sm|md|lg|xl controls only left and right widths; top and bottom span the viewport and scroll within its height. showCloseButton adds a named close control. Focus stays inside and returns to the trigger on close.
Examples
Sides
Right is the default for detail beside a list. Left suits navigation, and top or bottom suit short tasks on a phone.
Sizes
Side sheets come in four widths. Pick the narrowest that fits the content.
With a form
A header, a scrolling body and a footer pinned to the bottom. The close button is opt-in for sheets without a Cancel.
Loading and error
Load the record after the sheet opens. A skeleton holds the layout, and a failure offers Try again in place.