shadcn.io is not affiliated with official shadcn/ui
Platform Fee Pricing Block for Vue
A maker marketplace's take rates in four ruled tier rows: each percentage at display size over a bar that shrinks with it, with the plan fee, the sales it pays off from and the payout speed.
Installation
Overview
Explain a marketplace's fee structure with this platform fee section, where the falling rate is the first thing you see. A header row holds the headline and a short pitch on the left and three trust points on the right, between the page's rails, under a top rule drawn by Guides with a + mark at each end. Below, four tier rows run edge to edge between the rails, ruled by hairlines: each shows its take rate at display size over a bar whose length follows the rate, so the bars shrink from Starter to Enterprise, then the tier's name and description, a description list with the monthly plan fee, the monthly sales above which the plan costs less than the one before it, and the payout speed, and a Shine Button. The columns are shared by every row, so the rates, the facts and the buttons line up. The recommended Business tier is a tinted band with an outline Recommended Badge and the section's only primary button; the other tiers' buttons are outlines. A note under the rows explains what "Pays off from" means. Built with Guides, Badge, Shine Button, Lucide icons and Tailwind CSS, with CSS transitions only. For marketplace pricing pages, creator platforms and any fee schedule where the rate falls as the plan fee rises.
FAQ
How do I change the tiers, rates and fees?
Edit the TIERS array at the top of the file. Each tier has its name and description, the takeRate in percent (a number, so 1.5 keeps its decimal), the monthly fee in dollars (null for a custom contract), the payouts speed, the call to action's cta and href, and featured for the recommended tier. TRUST lists the trust points beside the headline, each with a Lucide icon. The bars are measured against the first tier's rate, so keep the highest rate first.
Where does the Pays off from number come from?
It's worked out from the tiers, never typed: the plan fee a tier adds over the one before it, divided by how much less of each sale it takes. Growth costs $29 more than Starter and takes 3 points less, so it's cheaper above $967 a month in sales; Business costs $70 more than Growth and takes 2 points less, so it's cheaper above $3,500. Change a fee or a rate and the numbers follow. A custom contract has no number and says Custom.
How do I connect the tier buttons to seller onboarding?
Each call to action is a real link to its tier's href. Point it at your onboarding route with the tier in the address, for example /onboarding?tier=business, and let your server apply that tier's fee schedule when it creates the seller's account.
It's the a inside ShineButton as-child; put a RouterLink there instead if you like.
Is the fee table accessible?
Each tier is an h3 under the section's h2. The rate is read as "3% take rate" and the bar is decorative and hidden, so the numbers carry everything. The plan fee, the break-even sales and the payout speed are a description list, so a screen reader reads each value with its label. Each call to action names its tier for screen readers, as in "Choose Growth, Growth plan".
How do the rates and buttons line up across rows?
From the md breakpoint the list is one grid with four columns, the rate, the name, the facts and the button, and each row is a subgrid that shares them, so every rate, fact and button lines up without fixed widths inside a row. Below it each row stacks: the rate and name side by side, the facts, then a full-width button. The trust points are hidden on a phone to keep the header short.
How do I recommend a different tier?
Move featured: true to that tier. Its row takes a tinted band and its Recommended Badge, and its button becomes the default (primary) variant while the others are outlines.
When should I use stacked fee rows instead of plan cards?
Use rows when every tier is measured on the same few numbers, a rate, a fee, a payout speed, and buyers scan down a column to see them fall. The bars make the trade-off visible at a glance, which suits marketplaces where the falling take rate is the selling point. Use plan cards when tiers differ by features rather than by rates.