Overlays

Sheet.

A side panel for supporting details.

LIVE PREVIEWTry it. It works.

Install the source

npx shadcn@latest add https://ui.bld8.dev/r/sheet.json

Registry setup · Open the playground

Usage

<Sheet trigger={<Button variant="secondary">Open details</Button>} title="Project details">Details go here.</Sheet>

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Uses the same API and accessible dialog behaviour as Dialog, positioned at the right edge. It does not implement swipe gestures.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.