Use the stepper for seats on Billing and users on Settings → Plan

preview/pages/billing.astro

@@ -16,6 +16,7 @@ import ListGroupItem from '@ui/ListGroupItem.astro'
 import Icon from '@ui/Icon.astro'
 import Payment from '@ui/Payment.astro'
 import Progress from '@ui/Progress.astro'
+import Stepper from '@ui/Stepper.astro'
 import type { PaymentProvider } from '@shared/lib/tokens'
 
 const usage = { used: 7420, limit: 10000 }
@@ -79,7 +80,12 @@ const invoiceStatus = {
               <Datagrid>
                 <DatagridItem title="Billing period">Monthly</DatagridItem>
                 <DatagridItem title="Next invoice">September 18, 2026</DatagridItem>
-                <DatagridItem title="Seats">8 of 10 used</DatagridItem>
+                <DatagridItem title="Seats">
+                  <div class="d-flex align-items-center gap-2">
+                    <Stepper size="sm" value={10} min={8} max={100} ariaLabel="Seats in the plan" />
+                    <span class="text-secondary">8 used</span>
+                  </div>
+                </DatagridItem>
               </Datagrid>
             </CardBody>
           </Card>

preview/pages/settings-plan.astro

@@ -2,6 +2,8 @@
 import SettingsLayout from '@shared/layouts/SettingsLayout.astro'
 import PricingCard from '@shared/components/cards/PricingCard.astro'
 import PricingCardEnterprise from '@shared/components/cards/PricingCardEnterprise.astro'
+import Stepper from '@ui/Stepper.astro'
+import FormGroup from '@ui/FormGroup.astro'
 ---
 
 <SettingsLayout active="settings-plan" title="Plans">
@@ -10,6 +12,8 @@ import PricingCardEnterprise from '@shared/components/cards/PricingCardEnterpris
 
     <p class="text-secondary mb-4">This workspace’s Basic Plan is set to $34 per month and will renew on June 19, 2022.</p>
 
+    <FormGroup label="Users" for="plan-users" hint="Each plan is billed per user. Pick how many people need access." class="mb-4"><Stepper id="plan-users" value={10} min={1} max={100} /></FormGroup>
+
     <div class="row row-cards">
       <div class="col-lg-4">
         <PricingCard price="0" users={3} category="Free" />