marketing/DSPricingCard

DSPricingCard

marketing
since 0.1.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+watchOS 10+tvOS 17+visionOS 1+

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

PropTypeDefaultDescription
planreqDSPricingPlan—Plan content: name, price, period, description, features, ctaLabel, isPopular, color.
isAnnualBoolfalseShows the annual billing variant.
onSelect() -> Void{}CTA action.

Examples

Two plans

Build each plan with DSPricingPlan and DSPricingFeature. isPopular highlights the card.

swift
let starter = DSPricingPlan(
    name: "Starter",
    price: "Free",
    period: "",
    description: "For personal projects",
    features: [
        DSPricingFeature(text: "3 projects"),
        DSPricingFeature(text: "1 GB storage"),
        DSPricingFeature(text: "Analytics", included: false),
    ],
    ctaLabel: "Get started"
)
let pro = DSPricingPlan(
    name: "Pro",
    price: "$49",
    period: "/month",
    description: "For small teams",
    features: [
        DSPricingFeature(text: "Unlimited projects"),
        DSPricingFeature(text: "50 GB storage"),
        DSPricingFeature(text: "Analytics"),
    ],
    ctaLabel: "Subscribe to Pro",
    isPopular: true
)

HStack(alignment: .top, spacing: DSSpacing.md) {
    DSPricingCard(plan: starter)
    DSPricingCard(plan: pro, onSelect: { subscribe(.pro) })
}

Usage Guidelines

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

Related Components

FeatureCardHeroSection