Side Tabs Tour

About this block

Side Tabs Tour lets visitors walk the product at their own pace. A vertical tab rail names three product areas, and each pane pairs a one line blurb with a framed list mockup whose row chips change character per area, statuses for campaigns, counts for audiences, deltas for reports. The chips are what make three similar mockups read as three different rooms.

The areas are one array of value, label, blurb, and rows. The rail runs horizontal on mobile and vertical from the large breakpoint. Adding a fourth area is one more entry, the rail and panes scale together. The ui Tabs primitive carries the interaction, the block itself stays a server component.

When to use

Reach for this block when the product has distinct areas that different buyers care about unevenly, the demand gen lead clicks reports first, the ops person clicks audiences. Self directed beats scripted for these audiences. It is the area indexed cousin of feature-tabs-with-preview, which tours capabilities rather than places.

A natural flow around it on a Marketing Pro page:

Before

• Heroes establishing what the product is before the walkthrough

After

• Tour steps for the sequential version aimed at evaluators ready to start
• Pricing once the rooms have been seen

What you can display

One strong use is the three main areas of a marketing platform. Other tours:

• Role views. The same product as admin, editor, and viewer for permission heavy tools.
• Platform surfaces. Web, mobile, and API panes for multi surface products.
• Workspace types. Agency, brand, and freelancer setups for products serving all three.

Tip: vary the chip content per pane, statuses, counts, and deltas are what convince the eye these are different screens.