taste-skill / Components / shadcn/ui Pricing Table

shadcn/ui-Style Pricing Table

A 3-tier pricing table composed from shadcn/ui's extracted tokens — #FFFFFF canvas, #171717 accent, 10px button radius, Geist — with full HTML you can paste into your SaaS.

This is a composition: it is not shadcn/ui's actual pricing page. Plan names and prices are placeholders; colors, fonts, button and card recipes are the real extracted shadcn/ui tokens.

Live pricing table

Pricing

Starter

$0/mo

✓ 1 project
✓ Community support

Choose Starter

Pro

$20/mo

✓ Unlimited projects
✓ Priority support
✓ Analytics

Get started

Team

$50/mo

✓ Everything in Pro
✓ SSO
✓ Audit log

Choose Team

Tokens used

Part	Token
Background	`#FFFFFF`
Highlight / accent	`#171717`
Tier card	`box-sizing:border-box;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:24px;padding:20px 0px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
Primary CTA	`Button` recipe — 32px / 10px / #F5F5F5
Price type	`Geist`, weight 600, tracking -0.05em

Copy-paste HTML

pricing-table.html (inline styles)

<div class="pv-stage" style="background:#FFFFFF;padding:32px;font-family:Geist, Inter, system-ui, -apple-system, sans-serif;color:#0A0A0A">
  <div style="font-family:Geist, Inter, system-ui, -apple-system, sans-serif;font-size:40px;letter-spacing:-0.05em;font-weight:600;text-align:center;margin-bottom:24px">Pricing</div>
  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px">
  <div style="box-sizing:border-box;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:24px;padding:20px 0px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#737373">Starter</div>
    <div style="font-family:Geist, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.05em;color:#0A0A0A">$0<span style="font-size:14px;color:#737373;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#737373"><li>✓ 1 project</li><li>✓ Community support</li></ul>
    <a style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;text-decoration:none;height:32px;padding:0px 10px;border-radius:18px;background:#171717;color:#FAFAFA;border:0;font-size:14px;font-weight:500;margin-top:auto">Choose Starter</a></div>
  <div style="box-sizing:border-box;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:24px;padding:20px 0px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;outline:1.5px solid #171717;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#171717">Pro</div>
    <div style="font-family:Geist, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.05em;color:#0A0A0A">$20<span style="font-size:14px;color:#737373;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#737373"><li>✓ Unlimited projects</li><li>✓ Priority support</li><li>✓ Analytics</li></ul>
    <a style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;text-decoration:none;height:32px;padding:8px 16px;border-radius:10px;background:#F5F5F5;color:#000000;border:0;font-size:14px;font-weight:500;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;margin-top:auto">Get started</a></div>
  <div style="box-sizing:border-box;background:#FFFFFF;border:1px solid #E5E5E5;border-radius:24px;padding:20px 0px;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 -0.00000143796 0.00000340492 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;display:flex;flex-direction:column;gap:12px">
    <div style="font-size:14px;font-weight:600;color:#737373">Team</div>
    <div style="font-family:Geist, Inter, system-ui, -apple-system, sans-serif;font-size:34px;font-weight:600;letter-spacing:-0.05em;color:#0A0A0A">$50<span style="font-size:14px;color:#737373;font-weight:400">/mo</span></div>
    <ul style="list-style:none;padding:0;margin:0;font-size:13.5px;line-height:1.9;color:#737373"><li>✓ Everything in Pro</li><li>✓ SSO</li><li>✓ Audit log</li></ul>
    <a style="display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;text-decoration:none;height:32px;padding:0px 10px;border-radius:18px;background:#171717;color:#FAFAFA;border:0;font-size:14px;font-weight:500;margin-top:auto">Choose Team</a></div>
  </div></div>

Keep it on-brand

NEVER substitute generic uncalibrated gray backgrounds for shadcn/ui’s exact #FFFFFF canvas and #F5F5F5 surface pairing.
NEVER replace Geist display typography or ignore its signature scale (48px / -0.05em (w600)).
NEVER use thick opaque borders that clash with #E5E5E5 (1px solid #E5E5E5).

More shadcn/ui

shadcn/ui full token spec shadcn/ui style guide shadcn/ui Buttons shadcn/ui Cards Tailwind CSS vs shadcn/ui

Same component, other brands

Linear Pricing Table Stripe Pricing Table Resend Pricing Table Vercel Pricing Table Supabase Pricing Table Raycast Pricing Table Cursor Pricing Table Clerk Pricing Table Mintlify Pricing Table Cal.com Pricing Table Dub Pricing Table Trigger.dev Pricing Table

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →