Search blocks by description or jump to a page.
A contextual help layout pairing a dimmed billing settings canvas with a docked help drawer of matched articles, a walkthrough card, and contact actions.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Contextual Help Drawer is a two panel blueprint. On the left a dimmed app canvas mocks a billing settings page, with a tabs strip, a payment method card ringed as the walkthrough target, and a skeleton invoice history. On the right a docked help drawer scoped to that page lists matched articles under On this page, a walkthrough card whose first step highlights the payment method on the canvas, and a Still stuck footer with Message us and Open a ticket actions.
Articles and the invoice skeleton rows are typed const arrays, and the drawer sits in a two column grid beside the canvas rather than a portal, so nothing escapes the preview root. Scoping the panel to the current page, and highlighting the exact element a step refers to, is what turns generic help into help for the thing in front of the user.
Reach for this block as an in app help surface that opens beside the current screen, wired to match articles and walkthroughs to the route the user is on. Replace the mocked billing canvas with your real page and point the walkthrough highlight at the element each step describes.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the page scoped help drawer. Other configurations:
Tip: match the drawer's articles to the current route, not the whole help center; a panel that mirrors the page in view beats a search box every time.