Featured Hero Shelves Pricing Block for React

Edit the constants at the top of the file. PICK is the editor's pick: an href, a Lucide icon, a name, its monthly price, publisher, rating, reviews, installs (a rounded string such as "12.4k") and a tagline. SHELVES is a list of shelves, each with a name, a description and its addons, which have the same fields. A price of 0 shows "Free" instead of a number. Shelves aren't limited to three tiles: from md the tiles share a three-column grid, so add tiles in threes.

Each Install is a real link to the add-on's href: point it at the add-on's page, or at an install flow that adds it to the visitor's plan. The block has no state or handlers, so in a framework with React Server Components it renders on the server, where you can fetch the add-ons directly.Each link is render={<a href={…} />} on ShineButton, with nativeButton={false}.

Below the md breakpoint a shelf is a horizontal row with scroll snapping: tiles are 85% wide, so the next one peeks in and shows there's more, and a swipe settles on the next tile. Keyboard users get the same row: Tab reaches each tile's Install link and the row scrolls to it. The editor's pick stacks (icon, details, then price and button), and its button sits within the first screen and a half of an iPhone. From md the shelves are plain three-column grids with nothing to scroll.

Yes. Each shelf is a section named by its heading, tiles are list items headed by an h4 under the shelf's h3, and a rating is read as "4.8 out of 5 stars, (1,204 reviews)" while its drawn stars are hidden from screen readers. Prices are read "per month", and every Install link names its add-on ("Install, SEO Kit"), so a list of links is never six identical "Install". The stars are foreground-coloured, so they don't depend on a palette colour, and the tile hover is a tint with no motion.

They're copy, in the header and the note under the shelves: the block doesn't enforce either. Keep them true in your billing setup, or edit the sentences. "Bundle any three paid add-ons and save 15%" is the kind of line that lifts the average basket; if you don't offer it, delete it.

Use shelves when what you sell is many independent items, each with its own price, publisher and reviews, and visitors browse rather than compare columns. A plan table is better when every feature belongs to one of three or four tiers. The editor's pick gives browsing a place to start, and it's the one item that can carry your primary button.