The Shell is a foundational layout component in Calcite, which enables the creation of rich, interactive experiences. Used in combination with components such as Shell Panel, Panel, Block, and Action Bar, Shell can be used to create consistent, compelling applications.


Shell can be used as a full-page experience, or given defined width and height to enable you to embed applications in other experiences or narrative content.

Shell provides a default slot for your primary application content.


  • When embedded within other content, the "alerts", "sheets" and "modals" slots facilitate placement of these components in relation to the Shell. For example, you can display a Modal within the bounds of an embedded Shell without it taking over the whole page.


API reference




Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.