Component library

Showing 1 component in the expressive deck with role compare.

  • <PlanComparisonGrid>

    expressiveCompareCTAPresentation

    Side-by-side pricing or plan comparison cards with feature lists and optional featured tier highlight.

    When to use: SaaS pricing, service tiers, or licence options. Typically three tiers; mark the recommended plan with featured: true.

    Preview

    Pricing

    Choose a plan

    Starter

    £0 /mo

    For evaluation.

    • 5 users
    • Community support
    Start free

    Team

    £29 /mo

    For growing teams.

    • Unlimited workflows
    • SSO
    Book a demo

    Enterprise

    Custom

    For regulated environments.

    • Dedicated support
    • Audit logs
    Contact sales
    PropTypeNotes
    labelstringOptional. Eyebrow above the section title.
    titlestringOptional. Section headline.
    tiers{ name: string; price: string; priceSuffix?: string; description?: string; features: string[]; featured?: boolean; cta?: string }[]Required. Plan cards (typically three). Pre-format price strings with currency.
    tweenobjectOptional. Optional GSAP vars for card entrance.

    Examples

    <PlanComparisonGrid
  label="Pricing"
  title="Choose a plan"
  tiers={[
    { name: "Starter", price: "£0", priceSuffix: "/mo", description: "For evaluation.", features: ["5 users", "Community support"], cta: "Start free" },
    { name: "Team", price: "£29", priceSuffix: "/mo", description: "For growing teams.", features: ["Unlimited workflows", "SSO"], featured: true, cta: "Book a demo" },
    { name: "Enterprise", price: "Custom", description: "For regulated environments.", features: ["Dedicated support", "Audit logs"], cta: "Contact sales" }
  ]}
/>