shadcn.io is not affiliated with official shadcn/ui
Compact Rows Pricing Block for React
The densest price list: a type foundry's six licenses set like a menu in mono, each row a name, what it covers and dot leaders running out to its price, with a buy button.
Installation
Overview
Put a whole price list in one glance with this compact rows pricing section, shown here for Glyphhouse Fonts, a type foundry that sells one font family under six licenses. The list is set like a restaurant menu, in the theme's mono face: each license is one line with its name, what it covers, a line of dots that runs out to its price, and a Shine Button to buy it. Desktop, Web, App, ePub, Broadcast and Enterprise share one band between the page's solid side rails, ruled between rows, with + marks on its corners under the spine's top rule. A compact header row says what every family includes (14 styles, three formats, free updates), so the first screen is the list: on a laptop the six rows end before 600 px. The Web license is tinted, carries a Most licensed outline Badge and the only primary button; Enterprise shows "from $1,200" and a Get a quote button. Below lg the dots join each name to its price and the rest sits on a second line with the button. It's a server component with no state, built with Badge, Guides, Shine Button and Tailwind CSS. For fonts, stock media, software licenses, one-time purchases and any catalog where the price list is the product.
FAQ
How do I change the licenses and their prices?
Edit the LICENSES array at the top of the file. Each license has a name, a covers line for what it allows, its price in dollars, from for a price that is the start of a quote ("from $1,200"), popular for the tinted row with the badge and the filled button, and the button's cta and href. The three facts in the header are FACTS. money() writes the dollar amounts with thousands separators.
How are the dot leaders drawn, and do they affect screen readers?
Each leader is an empty span with a dotted bottom border that grows to fill the space between the description and the price, so it needs no characters and never changes with the font or the width. It's hidden from assistive technology, so a screen reader reads a row as name, what it covers and price, without any dots.
How do I connect the buy buttons to checkout?
Each button is a real link to its license's href: point it at a checkout with the license in the URL, for example /checkout?license=web, and send Enterprise to your sales form.
It's a ShineButton with render set to an a element and nativeButton={false}.
How do screen readers read each license?
The licenses are a list. Each license's name is an h3 under the section's h2, followed by what it covers and its price (a quote reads "from $1,200"). Every button names its license, as in "Buy, Web license", so the six buttons don't sound alike. The header's facts are a description list, read as "Formats: OTF, TTF, WOFF2".
How does it look on a phone?
Below the lg breakpoint a row has two lines: the name, a line of dots and the price on the first, and what the license covers with its button on the second. The header's facts and the badge are hidden there (the facts move into the note under the list, and the tint and the filled button still mark the Web license), and the first buy button is within the first screen on a phone. From lg each license is a single line about 50 px tall.
When should I use a menu-style price list?
When the product is the same and the price depends on how it's used: font licenses, stock photos, software seats by use. A list of six lines compares faster than six cards, and dot leaders make the eye travel from the name to the price. If plans differ by features rather than by use, use cards or a comparison table instead.
Related
- Pro
Accordion Plans Pricing
Plan rowsThree plan rows for an email API, each its own band with its price and call to action in view, opening in place to list its features, with a monthly and annual switch in the header row.
- Pro
Stacked Cards Pricing
Plan cardsA fanned deck of plan cards for a flashcard app: the chosen plan's card in front with its price, button and features, the other two peeking out behind, brought forward by a tab list.
- %%%Pro
Per Transaction Pricing
Sales and partnersPer-transaction rates for a payments processor as ruled rows, each percentage at display size with its fixed fee or cap, and a region switch and call to action in the header row.
- Pro
Minimal Single Plan Pricing
Single planThe quietest single plan: one card in a card with a launch price beside the struck-out regular price, one call to action and six included features, under a short centred header.
- Pro
Flat Rate Pricing
Single planOne flat price for the whole company, set as a typographic band: the price at display size, the meters it never charges for struck through beside it, one call to action, and four cells of what's included.
- Pro
Spec Sheet Columns Pricing
Comparison tablesThree virtual-server plans laid out like a technical datasheet on the page column: a column per plan with its size, price and call to action, then grouped rows of monospaced specs on shared hairlines, and a plan switch on phones.