Aedis UI

Sheet

A panel from the edge of the screen for navigation on phones, details and filters. Swipe it away.

Installation

Once per app, set up Aedis UI. The CLI verifies the signed release before writing anything and pins every dependency:

npx @aedis/cli@0.1.0 init

Import the theme once in your global CSS, after Tailwind:

app/globals.css
@import "tailwindcss";@import "./styles/aedis-theme.css";

Then add the component:

npx @aedis/cli@0.1.0 add sheet# pnpm dlx @aedis/cli@0.1.0 add sheet · yarn dlx @aedis/cli@0.1.0 add sheet · bunx @aedis/cli@0.1.0 add sheet

Props

PropTypeDefaultDescription
Sheet side"right" | "left" | "bottom" | "top""right"Edge it comes from; also the direction that swipes it away.
SheetContent showCloseButtonbooleantrueThe labelled close button in the corner.
SheetContent labelsPartial<SheetLabels>—close: the close button's accessible name.
SheetProvider / SheetIndent / SheetIndentBackgroundcomponents—Optional: wrap the app so the page recedes behind any open sheet.
...props@base-ui/react Drawer props—Every prop of the underlying Base UI part, including render for composition.

Security

  • Modal: focus is trapped while open and returns to the trigger on close; the page behind is inert; Escape closes.
  • Title and description are wired to aria-labelledby and aria-describedby.