Patterns

Routing card

A provider card for a routing / connection screen. Shows the provider logo + name, the Payin/Payout flows it handles, and its publish status. Two types: Explore (read-only) and Route (selectable — adds a checkbox + overflow menu). Not published shows Set up; published shows the version + a green Published status + View.

Updated Jul 17, 2026 by Juan Pablo Turina

Anatomy

A Card with a header (logo + flow tags top-right, name below; the Route type adds a checkbox on the left and an overflow menu on the right) and a bordered footer (publish status Badge + action Button). Hover lifts the card (primary border + shadow-xl).

Payouts
Adyen
Version 22
Published
  1. 1
    Provider logo

    40px IconWrapper (logos variant). Route adds a selection Checkbox to its left.

  2. 2
    Flow tags

    Secondary badges (Payins / Payouts) top-right showing which flows route through this provider.

  3. 3
    Overflow menu

    Route type only: a DotsThreeOutline menu on the right for per-provider actions.

  4. 4
    Title + version

    CardTitle (provider name). When published, a version subtitle appears below.

  5. 5
    Status + action

    Footer: Not published (outline Badge) + Set up, or a green Published StatusBadge + View.

States

Explore (read-only)

Logo + flow tags + name + publish status. Use in a catalog of providers the merchant can explore and set up.

Payouts
Adyen
Not published
Payouts
Adyen
Version 22
Published
<RoutingCard name="Adyen" flows={["payout"]} />
<RoutingCard name="Adyen" published version="Version 22" />
Route (selectable)

Adds a selection checkbox and an overflow menu. Use in a routing rule where providers are picked and reordered.

Payouts
Adyen
Not published
Payouts
Adyen
Version 22
Published
<RoutingCard type="route" name="Adyen" onMenu={openMenu} />
<RoutingCard type="route" published defaultChecked onMenu={openMenu} />

Import

Copy this import line at the top of the file where you compose this molecule.

A molecule composed of Card + Badge + Checkbox + IconWrapper. Set type and published to cover the four combinations.
import { RoutingCard } from "@/components/patterns/routing-card";

Props

Everything else is forwarded to the underlying elements via ...props.

PropTypeDefaultDescription
namestring'Adyen'Provider name shown as the card title.
logoReactNodedemo logoProvider logo (40px IconWrapper). Pass your own brand mark.
type'explore' | 'route''explore''route' adds a selection checkbox + overflow menu.
publishedbooleanfalseSwitches the status, version subtitle, and action button.
versionstring'Version 22'Version subtitle shown when published.
flows('payin' | 'payout')[]['payout']Flow tags shown top-right (Payins / Payouts).
defaultCheckedbooleanfalseInitial checkbox state (route type).
onCheckedChange(checked: boolean) => void—Fires when the selection checkbox toggles (route type).
onMenu() => void—Overflow menu handler (route type).
onSetup() => void—Set up button handler (not published).
onView() => void—View button handler (published).
classNamestring—Extra classes merged onto the Card.

Related

Cross-links to the atoms this molecule composes and sibling patterns.

  • Connection cardThe sibling provider card for the Connections screen.
  • CardThe atom this molecule is built on.
  • BadgeFlow tags + publish status.