Orvain UI

Payment methods

Choosing a default among saved items: cards, addresses, devices.

Get Pro to installPro15 blocksReact, Vue and Figma
MCPConnect the MCP server

Payment methods

Choose the method we charge by default.

More in Radio Groups#

Email frequency

Single-choice settings: a titled list where exactly one row can be on

Email frequency, your week

Choosing how often to email while showing the load: what lands in the inbox, day by day

Email frequency, next email

Settings where each choice has one detail: a time, a day, or nothing

Plan selector

Pricing and upgrade flows: one plan at a time, with the billing period as a toggle

Plan selector, columns

Comparing plans line for line

Plan selector, what changes

Plan changes where the person needs to see what they gain or lose and what is due

Workspace defaults

Settings with several independent single choices: people, integrations, defaults

Workspace defaults, sentence

Showing the effect of settings as plain language

Workspace defaults, tiles

Choosing by face or logo

Payment methods

Choosing a default among saved items: cards, addresses, devices

Payment methods, wallet

Cards where seeing the face of the chosen card helps

Payment methods, instant

Defaults that apply the moment they are chosen, with a safety net

Radio card

One option as a card: a person, an account, a destination

Radio card, hand-off

An option that needs a little more detail once chosen

Radio card, faces

Picking one person from several in little space

When to use#

  • A handful of options meant to be compared side by side before one is picked
  • Plans or tiers, where the differences matter more than the names
  • Picking a default among saved items: a card, an address, a shipping speed
  • A survey question where exactly one answer is valid

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans