Position System

Grunfeld provides an intuitive position system that divides the screen into 9 sections. This allows you to place dialogs in exact positions.

Grid Layout#

The screen is divided into 9 regions as follows:

top-left     | top-center     | top-right
center-left  | center         | center-right
bottom-left  | bottom-center  | bottom-right

Position Usage Examples#

Use cases for each position:

center or center-center: Important confirmation dialogs, modals
top-right: Notifications, toast messages
bottom-center: Action sheets, cookie consent
top-center: Banners, announcements
bottom-right: Chat widget

// Center modal
grunfeld.add(() => ({
  element: <ImportantModal />,
  position: "center",
}));

// Top-right notification
grunfeld.add(() => ({
  element: <Notification />,
  position: "top-right",
}));

// Bottom action sheet
grunfeld.add(() => ({
  element: <ActionSheet />,
  position: "bottom-center",
}));

Multiple Dialogs#

When displaying multiple dialogs simultaneously, dialogs in the same position stack according to z-index:

// All shown at top-right but stacked by z-index
grunfeld.add(() => ({
  element: <Notification1 />,
  position: "top-right",
}));

grunfeld.add(() => ({
  element: <Notification2 />,
  position: "top-right",
}));

grunfeld.add(() => ({
  element: <Notification3 />,
  position: "top-right",
}));

Each dialog is positioned independently, so you can display multiple dialogs in different regions simultaneously.