From 1039985361d3f78a4fbbc4455c8ea36eb4b75f0a Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Tue, 10 Mar 2026 13:38:02 -0500
Subject: [PATCH 1/2] fix(clerk-js): Only render toggle if plan is not the
 default plan

---
 .changeset/bright-brooms-rule.md                             | 5 +++++
 packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx    | 2 +-
 .../src/ui/components/PricingTable/PricingTableDefault.tsx   | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/bright-brooms-rule.md

diff --git a/.changeset/bright-brooms-rule.md b/.changeset/bright-brooms-rule.md
new file mode 100644
index 00000000000..baa907ea536
--- /dev/null
+++ b/.changeset/bright-brooms-rule.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Fix issue where free plans had a monthly/annual toggle.
diff --git a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
index ba5bde2d969..a715d8e7d31 100644
--- a/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
+++ b/packages/clerk-js/src/ui/components/Plans/PlanDetails.tsx
@@ -325,7 +325,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
         </>
       </Flex>
 
-      {plan.annualMonthlyFee ? (
+      {plan.annualMonthlyFee && !plan.isDefault ? (
         <Box
           elementDescriptor={descriptors.planDetailPeriodToggle}
           sx={t => ({
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 879ed453c3c..2657b215faa 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -381,7 +381,7 @@ const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((props, ref
         ) : null}
       </Flex>
 
-      {planSupportsAnnual && setPlanPeriod ? (
+      {planSupportsAnnual && !plan.isDefault && setPlanPeriod ? (
         <Box
           elementDescriptor={descriptors.pricingTableCardPeriodToggle}
           sx={t => ({

From f36ae3878bf2206e4d4b3728ad8c0d1e279fdd0e Mon Sep 17 00:00:00 2001
From: Dylan Staley <88163+dstaley@users.noreply.github.com>
Date: Tue, 10 Mar 2026 14:33:30 -0500
Subject: [PATCH 2/2] fix(clerk-js): Disable switch to annual for default plans

---
 packages/clerk-js/src/ui/contexts/components/Plans.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/contexts/components/Plans.tsx b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
index 834b37fdb06..582028125f2 100644
--- a/packages/clerk-js/src/ui/contexts/components/Plans.tsx
+++ b/packages/clerk-js/src/ui/contexts/components/Plans.tsx
@@ -215,7 +215,7 @@ export const usePlansContext = () => {
       const subscription =
         sub ?? (plan ? activeOrUpcomingSubscriptionWithPlanPeriod(plan, selectedPlanPeriod) : undefined);
       let _selectedPlanPeriod = selectedPlanPeriod;
-      const isEligibleForSwitchToAnnual = Boolean(plan?.annualMonthlyFee);
+      const isEligibleForSwitchToAnnual = Boolean(plan?.annualMonthlyFee && !plan.isDefault);
 
       if (_selectedPlanPeriod === 'annual' && !isEligibleForSwitchToAnnual) {
         _selectedPlanPeriod = 'month';