Patterns

Routing version card

The route-version cards shown inside the Routing conditions sheet that opens from a RoutingCard's View button (Figma Card / Content). Each row is a published, archived or draft version of a route: an icon + name + version chip + a 'Last published at…' line, with a status badge, a favorite star and an overflow menu. Rows compose into a current version with its archived versions nested underneath, and a flat list of older versions.

Updated Aug 4, 2026 by Juan Pablo Turina

Live preview

Amex ArgentinaVersion 5
Last published at Dec 14, 2026, 1:15 pm GMT-3
Published
Amex ArgentinaVersion 6
Last published at Dec 14, 2026, 1:15 pm GMT-3
Archived
Visa ColombiaVersion 4
Last published at Dec 14, 2026, 1:15 pm GMT-3
Archived
Visa ArgentinaVersion 3
Last published at Dec 14, 2026, 1:15 pm GMT-3
Archived
Mastercard ArgentinaVersion 2
Last published at Dec 14, 2026, 1:15 pm GMT-3
Archived
import {
  RoutingVersionCard,
  RoutingVersionRow,
} from "@/components/patterns/routing-version-card";

<RoutingVersionCard>
  <RoutingVersionRow
    name="Amex Argentina"
    version="Version 5"
    subtitle="Last published at Dec 14, 2026, 1:15 pm GMT-3"
    status="published"
    favorite={isFavorite}
    onFavorite={toggleFavorite}
    onMenu={openMenu}
  />
</RoutingVersionCard>

Anatomy

A white bordered card (rounded-xl) around a row: a muted icon square, the route name + a version chip, an optional flag chip, and a muted last-published line; on the right a status badge, a favorite star and an overflow menu. Cards compose three ways: a plain card, a tree card (indented, with an L connector to the current version above) and a grouped list (collapsed borders, one rounded block).

Amex ArgentinaVersion 1
Last published at Dec 14, 2026, 1:15 pm GMT-3
Published
  1. 1
    Icon square

    A 48px muted square holding the route icon (TreeStructure by default).

  2. 2
    Name + version

    The route name (text-base semibold) and a version chip (secondary Badge, e.g. 'Version 5').

  3. 3
    Flag chip

    Optional Paused (yellow) or Error (rose) StatusBadge next to the version, on top of the main status.

  4. 4
    Last-published line

    The muted 'Last published at…' (or 'Last edited at…' for drafts) subtitle.

  5. 5
    Status

    The right-side StatusBadge: Published (green) or Archived (muted). Omitted on draft rows.

  6. 6
    Favorite star

    Toggles favorite; the filled star is yellow-600.

  7. 7
    Overflow menu

    Per-version actions (kebab).

  8. 8
    Card / Tree / List

    The plain card, the indented tree card with its L connector, and the grouped collapsed-border list.

States

Published

The live version — a green Published StatusBadge. Star it to mark the working favorite.

Amex ArgentinaVersion 1
Last published at Dec 14, 2026, 1:15 pm GMT-3
Published
Archived (nested)

A superseded version — a muted Archived badge. Shown as a tree card indented under its current version, with the L connector.

Amex ArgentinaVersion 6
Last published at Dec 14, 2026, 1:15 pm GMT-3
Archived
Flags (Paused / Error)

Optional Paused (yellow) or Error (rose) chip next to the version, on top of the main status.

Amex ArgentinaVersion 1Paused
Last published at Dec 14, 2026, 1:15 pm GMT-3
Published
Amex ArgentinaVersion 1Error
Last published at Dec 14, 2026, 1:15 pm GMT-3
Published
Draft (no status)

A draft version under the Drafts tab — omit status so no Published/Archived badge shows; the last line reads 'Last edited at…'.

Amex ArgentinaVersion 7
Last edited at Jan 16, 2026, 10:43

Import

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

Compose a RoutingVersionCard (or RoutingVersionList) around one or more RoutingVersionRow items.

import { RoutingVersionCard, RoutingVersionRow, RoutingVersionList } from "@/components/patterns/routing-version-card";

Nest an archived version under its current one with a tree card, and group a run of older versions in a RoutingVersionList (one rounded block, collapsed borders).

{/* Current version, then the archived version nested under it */}
<div className="flex flex-col gap-2">
  <RoutingVersionCard>
    <RoutingVersionRow name="Amex Argentina" version="Version 5" status="published" ... />
  </RoutingVersionCard>
  <RoutingVersionCard tree>
    <RoutingVersionRow name="Amex Argentina" version="Version 6" status="archived" ... />
  </RoutingVersionCard>
</div>

{/* A flat archived list — one rounded block, collapsed borders */}
<RoutingVersionList>
  <RoutingVersionRow name="Visa Colombia" version="Version 4" status="archived" ... />
  <RoutingVersionRow name="Visa Argentina" version="Version 3" status="archived" ... />
</RoutingVersionList>

Props

The row carries the content + actions; the card and list are the containers.

RoutingVersionRow

PropTypeDefaultDescription
namestring—The route name (text-base semibold).
versionstring—The version chip text, e.g. 'Version 1' (secondary Badge).
subtitlestring—The muted line under the name, e.g. 'Last published at ...'.
status"published" | "archived"—The right-side StatusBadge. Omit for a draft row (no badge).
pausedboolean—Optional Paused flag chip next to the version.
errorboolean—Optional Error flag chip next to the version.
favoriteboolean—Star fill state (filled star is yellow-600).
onFavorite() => void—Toggle the favorite star.
onMenu() => void—Open the per-version overflow menu.
iconPhosphorIconTreeStructureLeading icon in the muted square.

RoutingVersionCard

PropTypeDefaultDescription
treeboolean—Indent the card and draw the L connector back to the current version above.
childrenReactNode—A single RoutingVersionRow.
classNamestring—Extra classes on the card surface.

RoutingVersionList

PropTypeDefaultDescription
childrenReactNode—RoutingVersionRow items. Each renders in a padded cell separated by a divider.
classNamestring—Extra classes on the grouped block.

When to use

  • Inside the Routing conditions sheet (opened from a RoutingCard View button), listing a route's versions.
  • To show the current published version with its archived versions nested underneath.
  • Under the Drafts tab, to list draft versions of a route.

When not to use

  • For the routing screen provider tile — that is the routing card.
  • For a condition node on the canvas — that is the routing condition card.
  • For a generic list row outside the versions sheet.

Usage

Do
  • Nest archived versions under their current version with a tree card + the L connector.
  • Group a run of older versions in a RoutingVersionList so they read as one block.
  • Reuse the kit StatusBadge for Published / Archived / Paused / Error — do not hand-roll status chips.
Don't
  • Don't show a Published/Archived badge on a draft row — omit status under the Drafts tab.
  • Don't color the filled star anything but yellow-600.
  • Don't wrap each version in its own separate card when they belong to one group — use the list.

Related

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

  • Routing cardThe provider tile whose View button opens the versions sheet.
  • BadgeThe version chip (secondary) and the StatusBadge states.
  • SheetThe full-screen surface the cards live in.