calcite_shell: Create a Calcite Shell Layout

In calcite: Bindings to the Calcite Design System 'JavaScript' Component Library

Create a Calcite Shell Layout

Description

The Shell is a foundational layout component in Calcite, enabling the creation of rich, interactive experiences. It provides structured slots for headers, footers, side panels, and main content.

Usage

calcite_shell(
  ...,
  header = NULL,
  footer = NULL,
  panel_start = NULL,
  panel_end = NULL,
  panel_top = NULL,
  panel_bottom = NULL,
  modals = NULL,
  dialogs = NULL,
  alerts = NULL,
  sheets = NULL
)

Arguments

...	Main content to display in the default slot (between panels)
header	Content for the header slot (top of shell). Typically a calcite_navigation() component.
footer	Content for the footer slot (bottom of shell)
panel_start	Content for the start/left panel. Typically a calcite_shell_panel() wrapping a calcite_panel().
panel_end	Content for the end/right panel. Typically a calcite_shell_panel() wrapping a calcite_panel().
panel_top	Content for the top panel (below header)
panel_bottom	Content for the bottom panel (above footer)
modals	Slot for calcite_modal() components
dialogs	Slot for calcite_dialog() components
alerts	Slot for calcite_alert() components
sheets	Slot for calcite_sheet() components

Details

Shell Structure

The shell organizes your application into distinct regions:

• header: Top navigation bar

• panel-start/panel-end: Side panels (left/right)

• panel-top/panel-bottom: Top/bottom panels

• Default content: Main application area (maps, charts, etc.)

• footer: Bottom information/links

• Overlay slots: modals, dialogs, alerts, sheets

When embedded within other content, the overlay slots (modals, dialogs, alerts, sheets) facilitate placement of these components relative to the Shell, constraining them to the shell's boundaries rather than the full page.

Value

An object of class calcite_component which is a subclass of shiny.tag

References

Official Documentation

Examples

# Basic shell with header and content
calcite_shell(
  header = calcite_navigation(
    calcite_navigation_logo(slot = "logo", heading = "My App")
  ),
  "Main content goes here"
)

# Shell with sidebar panel
calcite_shell(
  panel_start = calcite_shell_panel(
    calcite_panel(heading = "Layers")
  ),
  calcite_panel(heading = "Map View")
)

calcite documentation built on March 3, 2026, 5:07 p.m.