Orvain UI

Switch card

One connection that needs a mark and a line, with a status that means something.

Get Pro to installPro24 blocksReact, Vue and Figma
MCPConnect the MCP server
AirbnbTravel
Sync trips to your calendar.Connected · trips go to Work calendar

More in Switch blocks#

Integrations

App directories where connecting is a server call and should say so

Integrations, shelf

Directories where the result of connecting should be visible at once

Integrations, ask first

Apps that read workspace data and should ask before they connect

Email preferences

Email settings that save themselves: grouped rows, a real frequency listbox and a required row that explains itself

Email preferences, pause

Inboxes that need a break: pause everything without losing a choice

Email preferences, forecast

Showing what the choices add up to before they arrive

Connected accounts

Social and sync settings where pausing, resuming and repairing an account are server calls

Connected accounts, health

Seeing the state of every account at a glance

Connected accounts, fix first

Putting the broken account in front of the person

Notification settings

Per-channel delivery as an accessible grid: one row per event, one column per channel

Notification settings, channels

Turning a whole channel off without losing the picks

Notification settings, preview

Choosing by the message instead of the channel name

Data & privacy

Consent and tracking choices that save as you go, over one that cannot be turned off

Data & privacy, receipt

Showing exactly what leaves the device next to the switches that decide it

Data & privacy, levels

Three presets over the details: most people pick a level and stop

Switch card

One connection that needs a mark and a line, with a status that means something

Switch card, preview

A switch whose effect is visible: the week it adds trips to

Switch card, fold

Off should be quick and forgiving: no confirm, a way back

Integration card

App directory tiles where the switch and Manage are separate controls

Integration card, setup

Connections that need one answer first

Integration card, pulse

Showing what the integration does so the switch has a visible cost

Integration row

Settings lists of connected apps: the integration on one line, with Manage that works

Integration row, services

One account with several services under it

Integration row, sync

Integrations whose value is freshness

When to use#

  • A setting that takes effect the instant it is flipped: visibility, a digest, a feature
  • Connecting or disconnecting an integration from a directory
  • A grid of events against channels, where every crossing is independent
  • Consent, where someone should see everything they are agreeing to at once

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