marketing/DSPricingCard

DSPricingCard

marketing

since v2.0

Subscription plan card with name, price, billing period, feature list with checkmarks, CTA, and highlighted state for the recommended plan.

iOS 17+macOS 14+

Purpose

Landing pages and upgrade screens. Clearly communicates value and differences between plans.

Props

Prop	Type	Default	Description
namereq	String	—	Plan name (e.g. 'Pro').
pricereq	String	—	Formatted price.
periodreq	String	—	Billing period (e.g. '/month').
descriptionreq	String	—	Plan value proposition.
featuresreq	[String]	—	List of included features.
ctaLabelreq	String	—	CTA button text.
isHighlighted	Bool	false	Shows border and 'Recommended' badge.
onSelectreq	(() -> Void)	—	CTA action.

Examples

Three plans

Starter, Pro (highlighted), and Enterprise.

swift

HStack(spacing: DSSpacing.md) {
    DSPricingCard(
        name: "Starter",
        price: "Free",
        period: "",
        description: "For personal projects",
        features: ["3 projects", "1 user", "1 GB storage"],
        ctaLabel: "Get started free",
        onSelect: {}
    )
    DSPricingCard(
        name: "Pro",
        price: "$49",
        period: "/month",
        description: "For small teams",
        features: ["Unlimited projects", "5 users", "50 GB storage", "Analytics"],
        ctaLabel: "Subscribe to Pro",
        isHighlighted: true,
        onSelect: { subscribe(.pro) }
    )
}

Usage Guidelines

Highlight only 1 plan as recommended.
Keep features comparable across all cards (use — to indicate absence).

Related Components

FeatureCard HeroSection