Sheet

A sliding overlay panel that emerges from the bottom or right edge of the viewport, with a blurred backdrop, header, scrollable body, and footer slot.

Components

Sheet

feedback

interactive

<arc-sheet>

Overview

Sheet provides a modal-like surface that slides into view from the bottom or right edge of the screen, suited to contextual actions, filters, or detail views that do not warrant a full-page navigation. When opened, a backdrop with a 4px blur covers the rest of the UI and clicking it dismisses the sheet. The bottom variant includes a drag-handle bar at the top as an affordance, while the right variant omits it. The panel is structured into three zones: a header row with a heading and close button, a scrollable body for slotted content, and a sticky footer for action buttons. You can replace the default heading with any markup via the `header` named slot, and put buttons in the `footer` slot. The body area uses `overflow-y: auto` so long content scrolls naturally within the panel. Sheet manages focus trapping and scroll locking automatically. When opened, it locks `document.body` overflow to prevent background scrolling, moves focus to the close button, and listens for the Escape key to dismiss. The `arc-open` event fires when the sheet becomes visible and `arc-close` fires on dismissal, so parent components can sync state or clean up.

Guidelines

When to use

Use the bottom sheet for mobile-friendly contextual panels like filters or share menus
Use the right sheet for desktop detail panes, settings forms, or property inspectors
Provide a descriptive `heading` so screen readers announce the dialog purpose via `aria-label`
Listen to `arc-close` to reset your local open state and perform any necessary cleanup
Populate the `footer` slot with primary and secondary action buttons for task-oriented sheets

When not to use

Do not nest a Sheet inside another Sheet; use a Dialog for layered overlays instead
Do not use Sheet for brief confirmations or alerts; use Confirm or Toast for those patterns
Do not set both `side="bottom"` and `side="right"`: only one placement is active at a time
Do not place critical navigation inside a Sheet: it is dismissible and should contain optional content
Avoid overloading the sheet body with too many form fields; consider a full page for complex forms

Features

`snap-points` for a bottom sheet that rests at several heights (a peek strip and a full view): drag the handle between them, or step with the arrow keys
`no-modal` for a sheet that floats over a page that stays usable: no backdrop, no scroll lock, and focus stays where it was
Two placement modes: `bottom` (default) and `right`, controlled by the `side` prop
Backdrop overlay with `backdrop-filter: blur(4px)` that dismisses the sheet on click
Bottom variant includes a rounded drag-handle bar for mobile touch affordance
Structured layout with header, scrollable body, and sticky footer zones
Named slots for `header` and `footer` to customise the chrome areas
Automatic scroll locking on `document.body` when open, restored on close
Escape key dismissal with focus auto-moved to the close button on open
Fires `arc-open` and `arc-close` custom events for lifecycle synchronisation

Preview

Filters

Details

Peek

Status

Active

Archived

Draft

Usage

This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.

<!-- Bottom sheet for filters -->
<arc-button id="open-filters" variant="secondary">Filters</arc-button>
<arc-sheet id="filter-sheet" heading="Filter Results" side="bottom">
  <div style="display:flex;flex-direction:column;gap:16px;">
    <div>
      <strong style="font-size:13px;">Status</strong>
      <div style="display:flex;gap:6px;margin-top:6px;">
        <arc-chip selected>Active</arc-chip>
        <arc-chip>Archived</arc-chip>
        <arc-chip>Draft</arc-chip>
      </div>
    </div>
    <arc-select placeholder="All categories" style="width:100%;"></arc-select>
  </div>
  <div slot="footer">
    <arc-button variant="ghost" onclick="this.closest('arc-sheet').open = false">Reset</arc-button>
    <arc-button variant="primary" onclick="this.closest('arc-sheet').open = false">Apply</arc-button>
  </div>
</arc-sheet>

<!-- Right sheet for detail pane -->
<arc-button id="open-details" variant="secondary">Details</arc-button>
<arc-sheet id="detail-sheet" heading="Project Details" side="right">
  <div style="display:flex;flex-direction:column;gap:12px;font-size:13px;">
    <div style="display:flex;justify-content:space-between;">
      <span style="color:var(--text-tertiary);">Framework</span>
      <span style="font-weight:500;">Next.js 14</span>
    </div>
    <div style="display:flex;justify-content:space-between;">
      <span style="color:var(--text-tertiary);">Status</span>
      <arc-badge variant="success">Live</arc-badge>
    </div>
  </div>
  <div slot="footer">
    <arc-button variant="primary">Open Project</arc-button>
  </div>
</arc-sheet>

<script>
  document.querySelector('#open-filters').addEventListener('click', () => {
    document.querySelector('#filter-sheet').open = true;
  });
  document.querySelector('#open-details').addEventListener('click', () => {
    document.querySelector('#detail-sheet').open = true;
  });
</script>

import { Sheet, Button, Chip, Select, Badge } from '@arclux/arc-ui-react';
import { useState } from 'react';

function FilterSheet() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Filters</Button>
      <Sheet heading="Filter Results" side="bottom" open={open} onArcClose={() => setOpen(false)}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <strong style={{ fontSize: 13 }}>Status</strong>
            <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
              <Chip selected>Active</Chip>
              <Chip>Archived</Chip>
              <Chip>Draft</Chip>
            </div>
          </div>
          <Select placeholder="All categories" />
        </div>
        <div slot="footer">
          <Button variant="ghost" onClick={() => setOpen(false)}>Reset</Button>
          <Button variant="primary" onClick={() => setOpen(false)}>Apply</Button>
        </div>
      </Sheet>
    </>
  );
}

function DetailSheet() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Details</Button>
      <Sheet heading="Project Details" side="right" open={open} onArcClose={() => setOpen(false)}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 13 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--text-tertiary)' }}>Framework</span>
            <span style={{ fontWeight: 500 }}>Next.js 14</span>
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
            <span style={{ color: 'var(--text-tertiary)' }}>Status</span>
            <Badge variant="success">Live</Badge>
          </div>
        </div>
        <div slot="footer">
          <Button variant="primary">Open Project</Button>
        </div>
      </Sheet>
    </>
  );
}

<script setup>
import { ref } from 'vue';
import { Sheet, Button, Chip, Badge } from '@arclux/arc-ui-vue';

const filtersOpen = ref(false);
const detailsOpen = ref(false);
</script>

<template>
  <Button variant="secondary" @click="filtersOpen = true">Filters</Button>
  <Sheet heading="Filter Results" side="bottom" :open="filtersOpen" @arc-close="filtersOpen = false">
    <div style="display:flex;flex-direction:column;gap:16px;">
      <div>
        <strong style="font-size:13px;">Status</strong>
        <div style="display:flex;gap:6px;margin-top:6px;">
          <Chip selected>Active</Chip>
          <Chip>Archived</Chip>
        </div>
      </div>
    </div>
    <template #footer>
      <Button variant="ghost" @click="filtersOpen = false">Reset</Button>
      <Button variant="primary" @click="filtersOpen = false">Apply</Button>
    </template>
  </Sheet>

  <Button variant="secondary" @click="detailsOpen = true">Details</Button>
  <Sheet heading="Project Details" side="right" :open="detailsOpen" @arc-close="detailsOpen = false">
    <div style="display:flex;flex-direction:column;gap:12px;font-size:13px;">
      <div style="display:flex;justify-content:space-between;">
        <span>Framework</span>
        <span style="font-weight:500;">Next.js 14</span>
      </div>
      <div style="display:flex;justify-content:space-between;">
        <span>Status</span>
        <Badge variant="success">Live</Badge>
      </div>
    </div>
    <template #footer>
      <Button variant="primary">Open Project</Button>
    </template>
  </Sheet>
</template>

<script>
  import { Sheet, Button, Chip, Badge } from '@arclux/arc-ui-svelte';

  let filtersOpen = $state(false);
  let detailsOpen = $state(false);
</script>

<Button variant="secondary" onclick={() => filtersOpen = true}>Filters</Button>
<Sheet heading="Filter Results" side="bottom" open={filtersOpen} on:arc-close={() => filtersOpen = false}>
  <div style="display:flex;flex-direction:column;gap:16px;">
    <strong style="font-size:13px;">Status</strong>
    <div style="display:flex;gap:6px;">
      <Chip selected>Active</Chip>
      <Chip>Archived</Chip>
    </div>
  </div>
  <div slot="footer">
    <Button variant="ghost" onclick={() => filtersOpen = false}>Reset</Button>
    <Button variant="primary" onclick={() => filtersOpen = false}>Apply</Button>
  </div>
</Sheet>

<Button variant="secondary" onclick={() => detailsOpen = true}>Details</Button>
<Sheet heading="Project Details" side="right" open={detailsOpen} on:arc-close={() => detailsOpen = false}>
  <div style="font-size:13px;display:flex;justify-content:space-between;">
    <span>Status</span>
    <Badge variant="success">Live</Badge>
  </div>
  <div slot="footer">
    <Button variant="primary">Open Project</Button>
  </div>
</Sheet>

import { Component } from '@angular/core';
import { Sheet, Button, Chip, Badge } from '@arclux/arc-ui-angular';

@Component({
  imports: [Sheet, Button, Chip, Badge],
  template: `
    <arc-button variant="secondary" (click)="filtersOpen = true">Filters</arc-button>
    <arc-sheet heading="Filter Results" side="bottom" [open]="filtersOpen" (arcClose)="filtersOpen = false">
      <div style="display:flex;flex-direction:column;gap:16px;">
        <strong style="font-size:13px;">Status</strong>
        <div style="display:flex;gap:6px;">
          <arc-chip [selected]="true">Active</arc-chip>
          <arc-chip>Archived</arc-chip>
        </div>
      </div>
      <div slot="footer">
        <arc-button variant="ghost" (click)="filtersOpen = false">Reset</arc-button>
        <arc-button variant="primary" (click)="filtersOpen = false">Apply</arc-button>
      </div>
    </arc-sheet>
  `,
})
export class FilterComponent {
  filtersOpen = false;
}

import { createSignal } from 'solid-js';
import { Sheet, Button, Chip, Badge } from '@arclux/arc-ui-solid';

function FilterSheet() {
  const [open, setOpen] = createSignal(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Filters</Button>
      <Sheet heading="Filter Results" side="bottom" open={open()} onArcClose={() => setOpen(false)}>
        <div style="display:flex;flex-direction:column;gap:16px;">
          <strong style="font-size:13px;">Status</strong>
          <div style="display:flex;gap:6px;">
            <Chip selected>Active</Chip>
            <Chip>Archived</Chip>
          </div>
        </div>
        <div slot="footer">
          <Button variant="ghost" onClick={() => setOpen(false)}>Reset</Button>
          <Button variant="primary" onClick={() => setOpen(false)}>Apply</Button>
        </div>
      </Sheet>
    </>
  );
}

import { useState } from 'preact/hooks';
import { Sheet, Button, Chip, Badge } from '@arclux/arc-ui-preact';

function FilterSheet() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button variant="secondary" onClick={() => setOpen(true)}>Filters</Button>
      <Sheet heading="Filter Results" side="bottom" open={open} onArcClose={() => setOpen(false)}>
        <div style="display:flex;flex-direction:column;gap:16px;">
          <strong style="font-size:13px;">Status</strong>
          <div style="display:flex;gap:6px;">
            <Chip selected>Active</Chip>
            <Chip>Archived</Chip>
          </div>
        </div>
        <div slot="footer">
          <Button variant="ghost" onClick={() => setOpen(false)}>Reset</Button>
          <Button variant="primary" onClick={() => setOpen(false)}>Apply</Button>
        </div>
      </Sheet>
    </>
  );
}

API

headingstring='': Text displayed in the header row. Also used as the aria-label for the dialog panel.
snap-pointsstring='': Heights a bottom sheet rests at, smallest first, as a comma-separated list of CSS lengths (snap-points="120px, 50dvh, 88dvh"). From script, a string or an array. The handle then drags between them, snapping to the nearest on release or to the next on a flick, and dragging well below the smallest requests a close. The handle is also a slider: arrow keys move between heights. Ignored by a right sheet.
openboolean=false: Controls whether the sheet is visible. Reflected as an attribute and toggleable programmatically.
side'bottom' | 'right'='bottom': Which edge the panel slides in from. Bottom sheets are at most --sheet-max-height tall (default 80dvh); right sheets are --sheet-width wide (default 400px).
modalboolean=true: Whether the sheet blocks the page. On (the default), the page behind is inert, scroll-locked and dimmed until the sheet closes. Off (no-modal), the sheet floats above a page that stays usable: no backdrop, no scroll lock, and opening it leaves focus where it was. Escape still closes it while focus is inside it.
snapnumber=0: Index into snapPoints of the height the sheet rests at. Updated as the user drags or steps the handle.
persistentboolean=false: The user cannot dismiss the sheet: Escape, a backdrop click and the drag-down close are ignored, dragging below the smallest snap point settles back on it, and there is no close button. For a permanent peek strip. Setting open from script still closes it.

Events

arc-changedetail:{ value: number }: Fired when the user moves the sheet to another snap point. value is the new snap index.
arc-close: Fired when the sheet closes
arc-open: Fired when the sheet opens

Sheet

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight