Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProUse this when an app listing shows screenshots: a drag-and-fling shelf with a caption under every screen and a phone or tablet switch that changes the frame shape.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for an app or product listing where each screenshot teaches one thing and people may want to see the tablet layout too.
Do not use it for a single hero image or for screenshots without captions: add the one-line caption, it is what people read.
It composes Carousel Free Scroll, which the CLI installs for you.
import { AppScreenshotsShelf } from "@/components/app-screenshots-shelf"<AppScreenshotsShelf
label="Screenshots"
screens={screens}
defaultDevice="phone"
/>| Prop | Type | Default | Description |
|---|---|---|---|
screens | Screenshot[] | - | Each has an id, caption and a node for the picture. |
label | string | - | Accessible name of the shelf. |
defaultDevice | "phone" | "tablet" | phone |
The pattern ships with a Testing Library test (app-screenshots-shelf.test.tsx). Embla needs layout to count snaps, and jsdom has none, so the repo's mockCarouselLayout helper gives the viewport and slides real sizes.