About
Linear/Vercel-style pricing tier card with real hierarchy: the popular tier lifts on desktop, picks up a gold border + Most Popular badge, and is the only one with a filled CTA — other tiers recede to outline. Flat, no gradients or glow.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pricing Tier to your project and fits it to your theme.
Code
How Pricing Tier is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import PricingTier from "@/components/ui/pricingtier";
export default function Demo() {
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-6 bg-slate-50 max-w-4xl mx-auto">
<PricingTier
name="Basic"
priceLabel="₦10,000"
features={["Word report (.docx)", "Same-day delivery", "LMU approved format"]}
ctaLabel="Choose Basic"
/>
<PricingTier
name="Standard"
priceLabel="₦15,000"
popular
features={[
"Word report (.docx)",
"15-slide PowerPoint deck",
"Same-day delivery",
]}
ctaLabel="Choose Standard"
/>
<PricingTier
name="Premium"
priceLabel="₦20,000"
features={[
"Word report (.docx)",
"15-slide PowerPoint deck",
"Priority queue",
"Full report printing & spiral binding",
]}
ctaLabel="Choose Premium"
/>
</div>
);
}