About this block

Screens Carousel Blueprint renders a five-slide carousel of Tend mobile app screens as a static blueprint: one active Placeholder at aspect-video with prev/next chevron buttons and a slide label overlay in the bottom-right, dot indicators below the main slide with the active dot widened to a pill, and a thumbnail strip of five smaller Placeholders with the active one ringed. No JavaScript, no Radix portal, pure rendered markup.

The active index is a const set to slide 2, the monthly report screen. The blueprint pattern is the distinctive choice: it lets screenshots and iframes capture a realistic carousel state without any JavaScript running.

When to use

Reach for this block on a product design case study page or as the screens section of a mobile app portfolio. The installer sets activeIndex to whichever slide they want foregrounded and swaps the five slide labels and captions for their actual screen names.

A natural flow around it on a Portfolio Pro page:

Before

• Case study split

After

• UI wall
• Contact band

What you can display

One strong use is the product screens carousel blueprint. Other static carousel layouts:

• Onboarding flow. Steps in sequence, the active slide set to the most complex step.
• Feature walkthrough. Each slide one feature, the thumbnail strip acting as a feature index.
• Brand rollout. Identity applications as slides, the active one the hero application.

Tip: set activeIndex to a dense, interesting screen, not the first one; it shows range immediately.