Checklist Shell

About this block

Checklist Shell is the onboarding home frame: a slim topbar with the Acme badge and four nav links (Home active), a Welcome, Avery header, and a two-column body. The left column is a Set up your workspace card with a progress bar at 2 of 5, two completed steps struck through, one expanded current step (Invite teammates) carrying its own copy and actions, and two upcoming steps. The right rail stacks a Resources list and a Need a hand booking card.

Done steps, upcoming steps, and resources are three const arrays; the active step is the one list item rendered open so the next action is always in view without expanding anything.

When to use

Reach for this shell as the landing surface for a new account, where the first session should guide rather than present a blank workspace. Wire each step to its real completion state, advance the open item as the user finishes, and swap the resources for your own docs and support entry points.

A natural flow around it on an Application Pro page:

Before

• Nothing, shells are the page

After

• Onboarding
• Help support

What you can display

One strong use is the workspace setup home. Other guided first sessions:

• Integration setup. Steps for connecting sources, each opening in place as the prior one completes.
• Verification flow. Identity or billing steps with progress toward an unlocked account.
• Team rollout. An admin checklist for seats, roles, and policy before inviting the wider org.

Tip: keep exactly one step expanded at a time; a checklist that opens every item at once loses the single next action the layout is built to surface.