Feature Tabs With Preview
Tabs switching between three features, each pane pairing a blurb with a framed app mockup.
Tabs switching between three features, each pane pairing a blurb with a framed app mockup.
The Marketing Collection unlocks the source for every Marketing block. All Access unlocks every Collection.
Already purchased? Log in
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.
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
After
One strong use is the plan, engage, measure loop of a campaign tool. A few other tab sets that work:
Tip: name tabs with verbs, plan, engage, measure pulls a click far better than three feature nouns.