# Modern SaaS Pricing: Metal Tier Cards

Three plan cards topped by Bronze, Silver and Gold bands with a medal and tag, over a price, seats, nine check rows and one pill each.

- Page: https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections/metal-tier-cards
- Collection: [Modern SaaS](https://www.shadcn-ui-blocks.com/blocks/modern-saas), Premium tier
- Group: [Pricing](https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections)
- Created: 2026-11-02
- Preview image: https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections/metal-tier-cards.png

## Install

```bash
npx shadcn@latest add @shadcn-ui-blocks/modern-saas-pricing-sections-metal-tier-cards
```

Needs an API key from a Pro or Team plan: add `@shadcn-ui-blocks` to the registries in components.json with the key as an `Authorization: Bearer` header. Setup: https://www.shadcn-ui-blocks.com/docs/shadcn-cli. The MCP server installs it without the setup: https://www.shadcn-ui-blocks.com/docs/mcp.

## Depends on

- npm packages: class-variance-authority, lucide-react, radix-ui
- shadcn/ui components: depth-button, surface
- Installs to: `@/components/blocks/modern-saas/pricing-sections/metal-tier-cards`

## About this block

Metal Tier Cards lays out three plans named Bronze, Silver and Gold. A
heading row opens it, and below it three Surface cards stand side by side,
each topped by a colored band with a medal, the plan name and a two line tag.

Under the band each card gives the price, the seats it includes, nine check
rows and one pill. The lists build on each other, so Silver opens with
"Everything in Bronze" and Gold with "Everything in Silver", and the middle
plan carries the only primary pill.

## When to use

Use it for a product priced by team size with a clear step up between plans,
such as a reporting tool, a design tool or a developer platform. The bands
are the one place the section uses color, so the tiers read at a glance
while the rest of the page stays near monochrome.

A natural flow around it on a Modern SaaS page:

**Before**

- [Feature Sections](https://www.shadcn-ui-blocks.com/blocks/modern-saas/feature-sections) that show what
  every plan includes
- [Testimonials](https://www.shadcn-ui-blocks.com/blocks/modern-saas/testimonials) to back the price with
  proof

**After**

- [FAQs](https://www.shadcn-ui-blocks.com/blocks/modern-saas/faqs) to answer billing and seat questions
- [CTAs](https://www.shadcn-ui-blocks.com/blocks/modern-saas/ctas) that offer a trial one more time

## What you can customize

- **Plans.** Edit the `plans` array: name, tag, price, seats, features, pill
  label and whether it is the featured plan. Keep each tag to two lines and
  each list to the same number of rows.
- **Bands.** Each band is a glow and a 160 degree gradient passed to `band`.
  Keep the middle stop dark enough for white text, or the tag drops below AA
  contrast.
- **Layout.** The cards sit in a row from lg and stack below it. Their pills
  align at the foot of each card whatever the list length.

> Tip: put the plan most teams should pick in the middle and give it the
> primary pill, so the eye lands there first.

## More in Modern SaaS Pricing

- [Depth Tier Cards](https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections/depth-tier-cards)
- [Membership](https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections/membership)
- [Plan Comparison Table](https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections/plan-comparison-table)
- [Three Tier](https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections/three-tier)
- [Two Plans](https://www.shadcn-ui-blocks.com/blocks/modern-saas/pricing-sections/two-plans)