shadcn.io is not affiliated with official shadcn/ui
Featured Hero Shelves Pricing Block for Svelte
An add-on marketplace for a CMS: an editor's pick in one compact band with its install button, over two shelves of add-on tiles that share their lines, each shelf a row to swipe on phones.
Installation
Overview
Sell add-ons the way an app store does with this marketplace pricing section, shown here for the add-ons of Harbor CMS. A compact header says what the section is and links to the full catalog with an outline Shine Button. Under it, the editor's pick is one compact band: its icon, name and an outline Badge, a sentence, the rating and installs, and its price beside the section's only filled button, Install. Below the pick, two shelves, "Reach and rank" and "Forms and tools", hold three tiles each in cells that share their hairlines, with + marks on each band's corners: the add-on's icon, publisher, what it does, a rating in foreground stars, installs, and its price (or Free) beside an outline Install link. On a phone every shelf is a row you swipe, each tile 85% wide so the next one peeks in. The bands sit on the page's rails under the top rule drawn by Guides. Built with Badge, Shine Button, Guides and Lucide icons, with CSS transitions only. For plugin and extension marketplaces, app directories, integration stores and any pricing made of many small priced items.
FAQ
How do I change the editor's pick and the shelves?
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.
How do I link the install buttons?
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.
How do the shelves work on a phone?
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.
Is the marketplace accessible?
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.
Where does the 14-day trial and the bundle discount come from?
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.
When should I use shelves instead of a plan table?
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.