A shipping address form that adapts labels, postal masks and line order to the country. A parcel label above it prints the address as you type and stamps it once saved.
npx shadcn@latest add https://hyperblur.dev/r/form-address.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/form-address.tsx.
import { FormAddress } from "@/components/hyperblur/form-address"
<FormAddress defaultValues={{ country: "GB" }} onSubmit={(address) => console.log(address)} />| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValues | Partial<FormAddressValues> | Prefilled country (US, CA, GB, DE, BR, AU), name, lines, city, region and postal code. | |
| showLabel | boolean | true | Shows the live shipping label preview. |
| sender | string | "Haven Goods · Portland, OR" | Sender line printed on the label. |
| submitLabel | string | "Save address" | Text of the submit button. |
| accent | string | "#f5c542" | Accent color for focus rings, selected states and the primary button. |
| delay | number | 900 | Minimum time in milliseconds the loading state stays visible, so the transition never flickers. |
| onChange | (values: FormAddressValues) => void | Called on every field change. | |
| onSubmit | (values: FormAddressValues) => void | Promise<void> | Called with the validated address. |