Skip to content

Shells

Shells divide the viewport. Primitives arrange children inside it.

A shell is not a complete screen. Start from a blueprint when you need a whole interface, then change it.

  • App — af-app — dashboard chrome (nav + main). af-is-collapsed for the icon rail
  • Cover — af-cover — full-viewport cover
  • Body — af-body — document column; pin a direct-child footer

In-page main + aside is not a shell. Use Sidebar (af-sidebar).