Number picker
Area-code search, candidate grid, one-click claim. The 'pick your business number' step of onboarding, self-served by your customers.
Search 415 (or any area code) and claim one — it's mock data.
Installation
npx shadcn@latest add @handset/number-pickerUsage
import { NumberPicker } from "@/components/handset/number-picker";
<NumberPicker
campaignId={tenant.campaignId} // attach 10DLC at purchase
onPurchased={(number) => saveTenantNumber(number.id)}
/>Buying a number bills your Handset account (~$2/mo at cost), so the proxy's POST /phone_numbers entry ships with a reminder: gate it behind an admin/owner check in resolveTenantId, or remove it and keep purchasing in your own admin flows. Purchase conflicts (someone claims the number first) surface as a retryable error, not a broken state.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tenantId | string | — | Owner of the purchased number. Omit when your proxy injects it. |
| campaignId | string | — | 10DLC campaign to attach at purchase — texting unlocks when it's approved. |
| onPurchased | (number: PhoneNumber) => void | — | Fires after a successful claim. |
| className | string | — | Merged onto the wrapper. |