Sheet

Edge-mounted dialog panels with sides, headers, descriptions, footers, scrollable content, programmatic opening, and RTL support.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrInputModule } from '@frame-ui-ng/components/input';
import { FrSheetModule } from '@frame-ui-ng/components/sheet';

HTML

<button frButton type="button" [frSheetTrigger]="sheet">
  <span frButtonLabel>Open sheet</span>
</button>

<ng-template #sheet="frSheetContent" frSheetContent aria-label="Workspace settings">
  <div frSheetPanel>
    <div frSheetHeader>
      <h2 frSheetTitle>Workspace settings</h2>
      <p frSheetDescription>Keep related controls close without leaving the page.</p>
    </div>

    <div frSheetBody>
      <label>
        <span>Workspace name</span>
        <input frInput value="Component library" />
      </label>
    </div>

    <div frSheetFooter>
      <button frButton appearance="outline" type="button" frSheetClose>
        <span frButtonLabel>Cancel</span>
      </button>
      <button frButton type="button" [frSheetClose]="'saved'">
        <span frButtonLabel>Save changes</span>
      </button>
    </div>
  </div>
</ng-template>

03 Examples

Basic

Use a sheet for contextual controls that should appear beside the current page instead of replacing it.

Component Sheet

Grid: 8px · Scale: 1:1

Side

Use the side input to choose whether the sheet enters from the top, right, bottom, or left edge.

Component Sheet

Grid: 8px · Scale: 1:1

No Close Button

Hide the default close icon when the flow should resolve through explicit footer actions.

Component Sheet

Grid: 8px · Scale: 1:1

Scrollable

Set scrollable when a sheet contains long content but should keep the panel dimensions stable.

Component Sheet

Grid: 8px · Scale: 1:1

Programmatic

Open a sheet from code and let FrSheetConfig provide the shell title, description, footer actions, side, and body component inputs.

Component Sheet

Grid: 8px · Scale: 1:1

RTL

Pass the CDK direction through the sheet content and use logical placement for RTL layouts.

Component Sheet

Grid: 8px · Scale: 1:1

04 Custom Styling

Override sheet tokens on a trigger, the panel, or an ancestor to tune the sheet surface, size, border, shadow, and spacing.

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

Open the sheet, then hover the trigger, panel, header, title, description, body, or footer to inspect the tokens behind each part.

06 Design Tokens

Use these CSS custom properties to tune sheet backdrop, surface, sizing, spacing, close button states, and overlay layering.

SCSS

--frame-sheet-backdrop-blur: 2px;
--frame-sheet-backdrop-bg: rgb(0 0 0 / 0.5);
--frame-sheet-bg: var(--frame-background);
--frame-sheet-border: var(--frame-border);
--frame-sheet-color: var(--frame-foreground);
--frame-sheet-muted-color: var(--frame-muted-foreground);
--frame-sheet-shadow: var(--frame-shadow-lg);
--frame-sheet-radius: 0px;
--frame-sheet-padding: 1.5rem;
--frame-sheet-gap: 1rem;
--frame-sheet-inline-size: min(100vw, 28rem);
--frame-sheet-block-size: min(100dvh, 28rem);
--frame-sheet-close-bg: transparent;
--frame-sheet-close-color: var(--frame-muted-foreground);
--frame-sheet-close-hover-bg: var(--frame-muted);
--frame-sheet-close-hover-color: var(--frame-foreground);
--frame-sheet-z-index: 1000;