The shell, live

A large title on the root that collapses to inline on scroll, lift-on-scroll, the active pill in the bottom bar, and minimize-on-scroll. Scroll the content up and down.

Today

day 6 illustration

Nephi stood at the edge of the wilderness, the bow broken in his hands. The others had given up, their hunger turning to murmuring, and even his father had begun to complain.

He did not argue. He made a new bow from a straight stave of wood, and an arrow from a branch, and he asked his father where he should go to find food.

The question itself was the turning. A son who could have been bitter chose instead to honor, and in honoring, the whole company remembered who they were.

They watched the Liahona, and its pointers gave a new direction, and words appeared upon it that were plain to read.

Nephi climbed to the top of the mountain where his father had sent him, and he returned with food, and the camp was quiet that night in a way it had not been for many days.

The wilderness did not become easier. But something in them had changed, and they carried it forward.

Scroll up and down inside the frame.

AppShell props

Prop	Type	Default	Description
title	string	none	Top bar title.
largeTitle	boolean	false	Use a large title that collapses to inline on scroll.
leading	ReactNode	none	Top bar leading slot (back or brand).
actions	ReactNode	none	Top bar trailing actions.
navItems	BottomNavItem[]	none	{ key, label, icon, href? } destinations.
activeNav	string	none	Active destination key.
onNavSelect	(key: string) => void	none	Destination select handler.
minimizeOnScroll	boolean	true	Recede the bars while scrolling down.

AppBar props

Prop	Type	Default	Description
title	string	none	The title text.
largeTitle	boolean	false	Large title that collapses to inline.
collapsed	boolean	false	Collapse the large title to inline (driven by scroll).
elevated	boolean	false	Add a hairline and soft lift (driven by scroll).
minimized	boolean	false	Slide the bar up out of view.

BottomNav props

Prop	Type	Default	Description
items	BottomNavItem[]	none	Destinations with a Phosphor icon component.
active	string	none	Active item key.
onSelect	(key: string) => void	none	Select handler.
minimized	boolean	false	Slide the bar down out of view.