Pricing Card
Plan cards with price, feature checklist, and CTA.
Free
Full open-source registry.
$0/ mo
- All components
- MIT license
Team
Priority support.
Popular
$49/ mo
- Everything in Free
- Slack channel
Installation
npx paubha@latest add pricing-cardUsage
import { PricingCard, PricingCardGrid } from "@/components/ui/pricing-card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
<PricingCardGrid>
<PricingCard
name="Team"
description="Priority support"
price="$49"
featured
badge={<Badge variant="brand" fill="subtle" size="sm">Popular</Badge>}
features={["All components", "Slack channel"]}
action={<Button>Start trial</Button>}
/>
</PricingCardGrid>Examples
Featured
Enterprise
Dedicated design-system help.
$199/ mo
- SLA
- Named partner
- Custom work