Pricing Plans Swipe Grid

ProNew

Use this when pricing cards should swipe on a phone and sit side by side on a wide screen: one list of plans that is a scroll-snap row in a narrow container and a grid in a wide one.

Customize

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.

label

Guide and examples

When to use it

Use it for a pricing section with two to four plans, where a phone should show one plan at a time with the next peeking in and a desktop should show them all.

Do not use it for a feature comparison table with many rows. Use a table that scrolls sideways.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`plans`	`Plan[]`	`-`	Each has an id, name, price, period, features, cta and optional highlighted flag.
`label`	`string`	`-`	Accessible name of the list of plans.
`onChoose`	`(plan: Plan) => void`	`-`	Called when a plan's button is pressed.

Accessibility

It is one list in the DOM, so a screen reader meets each plan once in both layouts; there is no hidden duplicate.
In the narrow layout the scroll area is focusable and named, so keyboard users can scroll it, and the browser brings a focused plan button into view.
The recommended plan says so in text ("Most popular"), not only with colour.
Keyboard: Tab: each plan's button (the row scrolls to follow)
Keyboard: Left / Right in the scroll area: scroll the row

Testing

The pattern ships with a Testing Library test (pricing-plans-swipe-grid.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.