Function: PlansPanel()

PlansPanel(__namedParameters): Element

Defined in: plansPanel/PlansPanel.tsx:50

PlansPanel renders a grid of PlanCard components with optional multi-dimensional SegmentedControl filters above them.

Each filter dimension independently narrows the visible set of plan cards. The component supports both uncontrolled mode (internal state from defaultValue) and controlled mode (via filterValues + onFilterChange).

Parameters

Parameter	Type
__namedParameters	PlansPanelProps

Returns

Element

Examples

// Uncontrolled — component manages filter state internally
<PlansPanel
  filters={[
    {
      id: 'interval',
      label: 'Billing Frequency',
      options: [
        { label: 'Monthly', value: 'monthly' },
        { label: 'Yearly',  value: 'yearly' },
      ],
      defaultValue: 'monthly',
    },
  ]}
  plans={plans}
  activePlanId="plan_basic_monthly"
  onSelectPlan={(planId) => console.log(planId)}
/>

// Controlled — consumer owns filter state
<PlansPanel
  filters={filters}
  filterValues={{ interval: 'yearly' }}
  onFilterChange={(id, value) =>
    setFilterValues((prev) => ({ ...prev, [id]: value }))
  }
  plans={plans}
  onSelectPlan={(planId) => checkout(planId)}
/>