12 contracts

Layout components

The structural primitives pages are built from — containers, grids, stacks, headers, cards. Contracts keep spacing and composition coherent so layouts agree across screens.

ContainerCentred horizontal max-width wrapper. The outermost layout primitive on most pages.

StackFlexbox primitive. Lays children in a row or column with consistent gap.

GridCSS Grid primitive with responsive column counts.

DividerHairline separator. Horizontal by default; vertical when in a row.

ScrollAreaCustom scrollbar with overlay scroll behaviour.

AspectRatioResponsive box that maintains a fixed ratio.

SheetEdge-anchored panel that slides in for secondary tasks.

ModalCentred, blocking surface for short flows. Use Dialog for confirmations, Sheet for browse/edit.

DialogConfirmation modal — focused decision surface.

ContextMenuRight-click contextual actions.

DropdownMenuClick-triggered actions menu.

DrawerMobile-first bottom sheet that slides up from the screen edge.

Related

Form components

Display components

Navigation components

Get layout components in your project.