Pricing Card

import { PricingCard } from "@/components/compositions/pricing-card";

{plans.map((plan) => (
	<PricingCard
		key={plan.id}
		name={plan.name}
		price={formatPrice(plan.price)}
		period={plan.price > 0 ? "/month" : undefined}
		description={plan.tagline}
		features={plan.features}
		badge={plan.id === "pro" ? "Most popular" : undefined}
		featured={plan.id === "pro"}
		current={plan.id === subscription.planId}
		onAction={() => purchase(plan.id)}
	/>
))}

import { PricingCardCompact } from "@/components/compositions/pricing-card-compact";
import { RadioGroup } from "@/components/ui/radio";

<RadioGroup value={plan} onValueChange={setPlan} gap={2} accessibilityLabel="Plan">
	<PricingCardCompact value="yearly" name="Yearly" price="$99" period="/year" description="$8.25 a month" badge="Save 30%" />
	<PricingCardCompact value="monthly" name="Monthly" price="$12" period="/month" description="Cancel anytime" />
</RadioGroup>;

import { PricingCardToggle, type Billing } from "@/components/compositions/pricing-card-toggle";

const [billing, setBilling] = useState<Billing>("yearly");

<PricingCardToggle
	name="Pro"
	monthlyPrice="$12"
	yearlyPrice="$9.60"
	discount="-20%"
	yearlyCaption="$115 billed yearly"
	features={["Unlimited projects", "Priority support"]}
	featured
	billing={billing}
	onBillingChange={setBilling}
	onAction={(choice) => purchase("pro", choice)}
/>;

import { PricingCard } from "@/components/compositions/pricing-card";
import { PricingCardHero } from "@/components/compositions/pricing-card-hero";

<PricingCardHero
	name="Pro"
	price="$12"
	period="/month"
	badge="Most popular"
	features={["Unlimited projects", "Priority support"]}
	actionLabel="Start free trial"
	onAction={() => purchase("pro")}
/>
<PricingCard name="Team" price="$32" period="/month" onAction={() => purchase("team")} />;

import { PricingCardHorizontal } from "@/components/compositions/pricing-card-horizontal";

<PricingCardHorizontal
	name="Pro"
	price="$12"
	period="/month"
	description="For people who ship every week."
	features={["Unlimited projects", "Priority support"]}
	featured
	current={subscription.planId === "pro"}
	onAction={() => purchase("pro")}
/>;

import { ScrollView } from "react-native";
import { PricingCardTile } from "@/components/compositions/pricing-card-tile";
import { RadioGroup } from "@/components/ui/radio";

<RadioGroup value={plan} onValueChange={setPlan} accessibilityLabel="Plan">
	<ScrollView
		horizontal
		showsHorizontalScrollIndicator={false}
		contentContainerStyle={{ gap: 12, paddingHorizontal: 16, paddingEnd: 16 + width / 2 }}
	>
		<PricingCardTile
			value="yearly"
			name="Yearly"
			price="$3.33"
			period="/month"
			description="$39.99 billed yearly"
			trial="7-day free trial"
			badge="Save 60%"
			style={{ width: 168 }}
		/>
		<PricingCardTile value="monthly" name="Monthly" price="$7.99" period="/month" style={{ width: 168 }} />
	</ScrollView>
</RadioGroup>;