Components / Sheet

Sheet

A dialog surface attached to an edge for complementary content and tasks.

example.component.html

html

<aevko-sheet title="Workspace settings" description="Update details for this workspace." side="right">
  <button aevkoSheetTrigger>
    Open settings
  </button>
  <label for="sheet-name">
    Name
  </label>
  <input id="sheet-name" />
  <button aevkoSheetClose>
    Save changes
  </button>
</aevko-sheet>

Installation

npx aevko-ui@latest add sheet --yes

Source ownership

Customization

Use the sheet for complementary work rather than primary navigation, select its logical edge and edit the installed width locally for your product.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`title / description`	`string`	`required / ''`	Accessible sheet heading and context.
`open`	`model<boolean>`	`false`	Controlled open state.
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	Viewport edge used by the surface.
`dismissal and focus inputs`	`boolean / CSS selector`	`dialog defaults`	Configures Escape, backdrop, initial focus and restoration.
`aevkoSheetTrigger / aevkoSheetClose`	`projected slots`	`empty`	Native opener and close actions.

Accessibility contract

Accessibility

Included behavior

The sheet retains native dialog modality, Escape handling and focus restoration regardless of its visual edge.

Your responsibility

Provide a meaningful heading, keep keyboard focus order logical and avoid hiding essential page information behind the overlay.

Back to all components