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.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

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