Container & Layout Components

Deck, TabPanel, SplitPanel, and more—organize complex UIs with built-in layout containers.

40+ Layout Components

Purpose-built layout components for every common UI pattern, all configurable from Java.

Stacks & Flow

Arrange children in rows or columns with configurable spacing, or let items wrap automatically.

  • HStack
  • VStack
  • FlowLayout
  • AutoLayout
  • Center
  • Spacer

CSS Grid

Full CSS Grid support with equal-width columns, responsive breakpoints, and named slot regions.

  • Grid
  • GridItem
  • ComposableLayout

App Structures

Header, sidebar, content, and footer regions for dashboards, admin panels, and two-pane interfaces.

  • AppShellLayout
  • RegionLayout
  • SplitLayout
  • SplitNavLayout
  • MasterDetailLayout

Multi-View Navigation

Switchable content panels with tabs, collapsible sections, card decks, and step-by-step wizards.

  • TabbedLayout
  • Tab
  • Accordion
  • AccordionItem
  • Deck
  • WizardLayout

Page Templates

Ready-to-use layouts for landing pages, forms, dashboards, documentation, settings, and error pages.

  • HeroLayout
  • FormLayout
  • DashboardLayout
  • DocsLayout
  • SettingsLayout
  • ErrorLayout
  • EmptyStateLayout
  • LoadingLayout
  • StoryLayout
  • FeatureGridLayout

Content Containers

Centered content columns, aspect-ratio boxes, scrollable regions, and section wrappers.

  • Container
  • CenteredContentLayout
  • MediaLayout
  • AspectRatio
  • ScrollBox
  • PageSection

Overlays & Chrome

Modal backdrops, slide-out drawers, sticky elements, navigation bars, and visual dividers.

  • Overlay
  • Drawer
  • GlassPane
  • Sticky
  • Divider
  • NavbarLayout

Utility Containers

Lightweight containers for centering, constraining width, scrolling, spacing, and async loading.

  • Center
  • Container
  • AspectRatio
  • Divider
  • Spacer
  • AsyncPanel

Example: Multi-View Deck

Deck lets you switch between multiple views programmatically. Only one child is visible at a time.

Java
public class DashboardPage extends HtmlPage
{
    private Deck deck;

    @Override
    protected void createBody(Body body)
    {
        // Navigation buttons
        Button overviewBtn = new Button("Overview");
        overviewBtn.registerListener(this::showOverview, MouseClickedEvent.class);

        Button detailsBtn = new Button("Details");
        detailsBtn.registerListener(this::showDetails, MouseClickedEvent.class);

        body.addElement(overviewBtn);
        body.addElement(detailsBtn);

        // Create multi-view deck
        deck = new Deck();
        deck.addElement(createOverviewPanel());
        deck.addElement(createDetailsPanel());
        body.addElement(deck);
    }

    private void showOverview(MouseClickedEvent event)
    {
        deck.setSelectedIndex(0);
    }

    private void showDetails(MouseClickedEvent event)
    {
        deck.setSelectedIndex(1);
    }
}

Example: App Shell Layout

AppShellLayout provides header, sidebar, content, and footer regions—the standard structure for dashboards, admin panels, and documentation sites.

Java
public class AdminPage extends HtmlPage
{
    @Override
    protected void createBody(Body body)
    {
        AppShellLayout layout = new AppShellLayout();
        layout.setSidebarWidth("260px");
        layout.setSidebarBackground("#1e293b");
        layout.setHeaderBackground("#0f172a");

        // Header with app title
        layout.header(createHeaderBar());

        // Sidebar navigation
        layout.sidebar(createNavMenu());

        // Main content area
        layout.content(createDashboardContent());

        body.addElement(layout);
    }
}

Benefits

Programmatic View Switching

Switch between views with a single method call. No DOM manipulation, no JavaScript—just set the index and the framework handles the rest.

Purpose-Built Components

Each layout targets a specific UI pattern. AppShellLayout for app shells, WizardLayout for multi-step flows, MasterDetailLayout for list-detail views.

Composable Containers

Nest layout components freely. Place a TabbedLayout inside a SplitLayout, or a Deck inside an Accordion—any combination works.

Server-Side State

The server always knows which view is active, which tab is selected, and how panels are sized. No client-server state sync issues.

No Custom JavaScript

All layout behavior is handled by the framework. Build complex multi-view interfaces entirely from Java.