107 Pro components and page blocks

Get Pro

Updated

Smart Address

New

Preview

Customize

Duration0.50s
Stagger0.035s
Radius18px

Installation

npx shadcn@latest add https://uibrik.com/r/smart-address.json
Adds the files to components/uibrik/smart-address and installs motion and react-use-measure. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/smart-address.

Usage

import { SmartAddress } from "@/components/uibrik/smart-address/smart-address";​const labels = ["Street", "City", "Region", "Postcode", "Country"];​<SmartAddress  label="Address"  placeholder="Paste a full address"  labels={labels}  duration={0.5}  stagger={0.035}  radius={18}  // value={…}  // onChange={(address) => {}}  // defaultValue={…}  // parse={(raw) => {}}/>

Props

SmartAddress
label
Type string
"Address"
Label of the single field before it splits.
placeholder
Type string
"Paste a full address"
Placeholder of the single field.
labels
Type string[]
["Street","City","Region","Postcode","Country"]
Labels for street, city, region, postcode and country, in that order.
duration
Type number
0.5
Length of the split: fields unfolding from under the street field and words landing in them.
stagger
Type number
0.035
Delay between one field and the next, in reading order.
radius
Type number
18
Corner radius of each field.
value / onChange
Type Address / (address: Address) => void
–
Controlled address: { street, city, region, postcode, country }.
defaultValue
Type Partial<Address>
–
Address on mount when uncontrolled. Anything past the street opens the full form.
parse
Type (raw: string) => ParsedAddress
parseAddress
Swap in your own parser. The built-in one runs offline and keeps anything it can't place in the street line.
ref
Type Ref<{ paste(text): void; clear(): void }>
–
Split an address from code, or empty the form.
className
Type string
–
Classes for the wrapper.