# Containers

<!--{"order": 300, "parent": "ui"}-->

**What controls sit in.** A [box](/box/) wraps, scrolls and moves focus between
its children. A [surface](/surface/) adds a layer above it for menus and
panels. A [popup](/popup-surface/) is another surface on its own plane, so in
3D it has real depth and can be torn off.

<!-- toc -->
- [box](/box/)
- [surface](/surface/)
- [popup-surface](/popup-surface/)
<!-- /toc -->