Feature Tabs With Preview

About this block

Feature Tabs With Preview is a tabbed feature section. A centered heading and lede sit above a three tab switcher, and each tab reveals a one sentence blurb with a framed app mockup beneath it: a kanban board for planning, an inbox list for engagement, and a report chart for measurement. The mockups are rounded divs inside a shared window frame, no screenshots, so they stay crisp in both themes.

The tabs are driven by one array holding the value, label, blurb, and mockup component for each feature, so renaming a tab or swapping a mockup is a local change. The three mockup components are small and self contained, copy one, reshape its rows, and you have a fourth tab. The shadcn Tabs primitive handles keyboard navigation and state, the block itself stays a server component.

When to use

Reach for this block when three workflows share one product and you want visitors to explore them actively rather than scroll past three static panels. Switching tabs is a small commitment that earns more attention than cards-with-mockups asks for, and it keeps the section half the height of alternating-with-charts. Prefer bento-grid or icon-grid-six when you have six or more features that each need only a sentence.

A natural flow around it on a Marketing Pro page:

Before

• Heroes to set the promise the tabs then demonstrate

After

• How It Works to turn the three tabs into a sequence
• Pricing once the product feels concrete

What you can display

One strong use is the plan, engage, measure loop of a campaign tool. A few other tab sets that work:

• Personas. One tab each for marketing, sales, and support, with the mockup showing that team in the product.
• Channels. Email, social, and ads tabs, each previewing its composer or report.
• Lifecycle. Acquire, onboard, retain, with mockups matched to each stage.

Tip: name tabs with verbs, plan, engage, measure pulls a click far better than three feature nouns.