AppShell

High-level layout container orchestrating header, navigation rail/drawer, aside panel, footer, and optional mobile bottom navigation. Provides consistent responsive behavior and safe-area handling across platforms.

Responsibilities

•

Manage responsive breakpoints & derive layout measurements

•

Provide context for child sections (header height, navbar width, etc.)

•

Support desktop inline collapsing (rail) and mobile drawer presentation

•

Coordinate safe-area padding via SafeAreaProvider

•

Offer configurable animation duration for structural transitions

Public Sub-Components

•

AppShell.Header – fixed header region at top

•

AppShell.Navbar – left navigation (rail / drawer)

•

AppShell.Aside – right supplemental panel

•

AppShell.Footer – bottom footer (desktop)

•

AppShell.BottomNav – mobile-only bottom navigation bar

•

AppShell.Main – primary scroll/content surface

•

AppShell.Section – helper container for vertical stacking inside panels

Key Hooks

•

useAppShell() – consume computed layout context

•

useBreakpoint() – current breakpoint token

•

useNavbarHover() – desktop rail hover expansion state

•

resolveResponsiveValue(value, breakpoint) – utility to normalize ResponsiveSize

Default Config Reference

See defaults.ts for baseline dimension & behavior values and meta.schema.ts for a lightweight machine-readable spec.

Notes

•

Hover expansion is intentionally local to navbar to avoid global re-renders

•

Rail width defined via navbar.collapsedWidth (default 72)

•

Future: integrate design token pipeline for breakpoint map & spacing scales.

•

AppShell.Main supports configurable maxWidth, centering, and responsive table-of-contents rail. When autoLayout is enabled you can pass maxContentWidth, centerContent, and table of contents props directly to AppShell for convenience.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Enhanced

Loading demo…

import

 

{

 

AppShell

,

 

Block

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

sampleTOC

=

 

(

  

<Block

>

    

<Text

 

variant

=

"h6"

 

mb

=

"sm"

>

Contents

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

0

 

}

}

>

Introduction

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

12

 

}

}

>

Getting

 

Started

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

12

 

}

}

>

Installation

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

24

 

}

}

>

NPM

 

Package

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

24

 

}

}

>

Yarn

 

Setup

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

12

 

}

}

>

Configuration

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

0

 

}

}

>

Components

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

12

 

}

}

>

AppShell

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

12

 

}

}

>

Layout

 

System

</Text

>

    

<Text

 

size

=

"sm"

 

style

=

{

{

paddingLeft

:

 

0

 

}

}

>

Examples

</Text

>

  

</Block

>

)

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<AppShell

      

header

=

{

{

height

:

 

60

 

}

}

      

navbar

=

{

{

 

        width

:

 

280

,

 

        breakpoint

:

 

'md'

,

        collapsed

:

 

{

mobile

:

 

true

 

}

      

}

}

      autoLayout

      

headerContent

=

{

(

)

 

=>

 

(

        

<Text

 

variant

=

"h4"

 

style

=

{

{

padding

:

 

16

 

}

}

>

          

Documentation

        

</Text

>

      

)

}

      

navbarContent

=

{

(

)

 

=>

 

(

        

<Block

 

p

=

"md"

>

          

<Text

 

variant

=

"h6"

>

Navigation

</Text

>

          

<Text

 

size

=

"sm"

>

Getting

 

Started

</Text

>

          

<Text

 

size

=

"sm"

>

Components

</Text

>

          

<Text

 

size

=

"sm"

>

Examples

</Text

>

          

<Text

 

size

=

"sm"

>

API

 

Reference

</Text

>

        

</Block

>

      

)

}

      

maxContentWidth

=

{

960

}

      

tableOfContents

=

{

sampleTOC

}

      

tableOfContentsWidth

=

{

280

}

      hideTableOfContentsOnMobile

      centerContent

    

>

      

<Block

 

p

=

"lg"

>

        

<Text

 

variant

=

"h1"

>

Main

 

Content

with

TOC

</Text

>

        

<Text

>

          

This

demonstrates the enhanced

AppShell

with max width constraints

          and a table of contents sidebar

.

 

The

main content area has a maximum

          width and is centered

,

 

while

the table of contents appears on the right

          on desktop screens

.

        

</Text

>

        

<Text

>

          

The

layout is fully responsive

-

on mobile devices

,

the table of contents

          is hidden by

default

to preserve screen space

.

        

</Text

>

        

<Text

 

variant

=

"h2"

>

Features

</Text

>

        

<Text

>

          •

Max

width constraint

for

better readability on wide screens

        

</Text

>

        

<Text

>

          •

Table

of contents sidebar with responsive behavior

        

</Text

>

        

<Text

>

          •

Configurable

through

AppShell

or

AppShellMain

props

        

</Text

>

        

<Text

>

          •

Seamless

integration with existing

AppShell

layout system

        

</Text

>

      

</Block

>

    

</AppShell

>

  

)

;

}

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

ComponentsChartsHooks

Docs

Getting StartedLocalizationllms.txt

Resources

FAQChangelogAccessibilitySitemap