Mielui · Sheet

Installation

pnpm dlx @mielui/svelte add sheet

Usage

The theme setting chrome.borders chooses "single" or "double" framing. Double is the default. Single removes the extra frame while preserving content padding, composition, and inset variants.

Set close={false} on Header to omit its default close button; place Sheet.Close wherever the layout needs it. Close forwards bind:element and supports click cancellation.

Bind open on Root when another control needs to open or close the panel. Use onOpenChange to respond to changes initiated inside the component. Updating your bound value directly does not call that callback again. Each Root keeps its own state, so opening one instance does not change another.

Sheets open from the left or right. Focus stays within the open sheet and returns to its trigger when it closes. Include Title and optionally Description; click handlers on Trigger and Close can cancel the state change with event.preventDefault().

import * as Sheet from '$lib/mielui/components/sheet';
import Kbd from '$lib/mielui/components/kbd';
import { Button } from '$lib/mielui/components/button';

<Sheet.Root bind:open>
  <Sheet.Trigger>Open</Sheet.Trigger>
  <Sheet.Content side="right">
    <Sheet.Header>
      <Sheet.Title>Title</Sheet.Title>
      <Sheet.Description>Describe what lives here.</Sheet.Description>
    </Sheet.Header>
    <!-- Panel content -->
    <Sheet.Footer>
      <Sheet.Close>Cancel <Kbd shortcut="esc" /></Sheet.Close>
      <Button>Save <Kbd shortcut="enter" /></Button>
    </Sheet.Footer>
  </Sheet.Content>
</Sheet.Root>

Examples

Left side

Right side

Glass surface

Set surface="glass" on Sheet.Content for a translucent background with blur. Omit surface to inherit --mielui-surface from your theme, or set surface="solid" to override it. The glass surface keeps an opaque fallback when backdrop filtering is unavailable and respects reduced-transparency preferences.

API reference

Sheet.Root

Controls sheet state.

Prop	Type	Default
`open` Bindable	`boolean \| undefined`	`false`
`onOpenChange`	`((open: boolean) => void) \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

Sheet.Close

Closes the sheet.

Prop	Type	Default
`disabled`	`boolean \| undefined`	`—`
`variant`	`ButtonVariant \| undefined`	`—`
`size`	`"sm" \| "md" \| "lg" \| "icon" \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`element` Bindable	`HTMLButtonElement \| HTMLAnchorElement \| undefined` Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:	`—`
`unstyled`	`boolean \| undefined` Skip the variant/size base classes and render with `class` alone.	`—`
`status`	`ButtonStatus \| undefined` Controlled visual state. Loading remains focusable and refuses activation.	`—`
`loading`	`boolean \| undefined` Convenience alias for `status="loading"`.	`—`
`loadingLabel`	`string \| undefined`	`—`
`successLabel`	`string \| undefined`	`—`
`errorLabel`	`string \| undefined`	`—`
`onclick`	`((event: MouseEvent) => void) \| undefined`	`—`
`onkeydown`	`((event: KeyboardEvent) => void) \| undefined`	`—`
`href`	`string \| undefined`	`—`

Sheet.Content

Renders the sheet surface.

Prop	Type	Default
`surface`	`"solid" \| "glass" \| undefined`	`—`
`allowClickOutside`	`boolean \| undefined`	`true`
`side`	`"left" \| "right" \| undefined`	`'right'`
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

Sheet.Description

Renders the sheet description.

Prop	Type	Default
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

Sheet.Footer

Groups sheet actions.

Prop	Type	Default
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

Sheet.Header

Groups sheet heading content.

Prop	Type	Default
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`close`	`boolean \| undefined`	`true`

Sheet.Title

Renders the sheet title.

Prop	Type	Default
`class`	`string \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`

Sheet.Trigger

Opens the sheet.

Prop	Type	Default
`disabled`	`boolean \| undefined`	`—`
`variant`	`ButtonVariant \| undefined`	`—`
`size`	`"sm" \| "md" \| "lg" \| "icon" \| undefined`	`—`
`children`	`Snippet<[]> \| undefined`	`—`
`element` Bindable	`HTMLButtonElement \| HTMLAnchorElement \| undefined` Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:	`—`
`unstyled`	`boolean \| undefined` Skip the variant/size base classes and render with `class` alone.	`—`
`status`	`ButtonStatus \| undefined` Controlled visual state. Loading remains focusable and refuses activation.	`—`
`loading`	`boolean \| undefined` Convenience alias for `status="loading"`.	`—`
`loadingLabel`	`string \| undefined`	`—`
`successLabel`	`string \| undefined`	`—`
`errorLabel`	`string \| undefined`	`—`
`onclick`	`((event: MouseEvent) => void) \| undefined`	`—`
`onkeydown`	`((event: KeyboardEvent) => void) \| undefined`	`—`
`href`	`string \| undefined`	`—`