Column Transit Board

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

<ColumnTransitBoard />

Installation

npx shadcn@latest add https://webberui.com/r/column-transit-board.json

Usage

Which column a card belongs to is decided entirely by your state — move a TransitCard into a different TransitColumn in your JSX and the board detects the column change and plays the flight animation. This is a purely controlled component; it holds no internal layout state.

import * as React from "react";
import {
  ColumnTransitBoard,
  TransitColumn,
  TransitCard,
} from "@/components/ui/column-transit-board";

const COLUMNS = [
  { id: "todo", title: "To do" },
  { id: "doing", title: "In progress" },
  { id: "done", title: "Done" },
];

const [placement, setPlacement] = React.useState<Record<string, string>>({
  a: "todo",
  b: "doing",
});

<ColumnTransitBoard>
  {COLUMNS.map((col) => (
    <TransitColumn key={col.id} id={col.id} title={col.title}>
      {Object.entries(placement)
        .filter(([, colId]) => colId === col.id)
        .map(([cardId]) => (
          <TransitCard key={cardId} id={cardId} title={cardId} />
        ))}
    </TransitColumn>
  ))}
</ColumnTransitBoard>;

// Change column: updating the state triggers the flight
setPlacement((prev) => ({ ...prev, a: "doing" }));

Props

ColumnTransitBoard

TransitColumn

TransitCard

Accent is "neutral" | "blue" | "violet" | "sky" | "emerald" | "amber" | "rose".

How it works

• Tracked by id, not by DOM node: when a card changes column, React unmounts it in the source column and remounts it in the target, so the board records its before and after positions keyed by id (FLIP) — which lets the flight continue seamlessly across the remount.
• Only structural changes cause a re-measure: the board computes a "column → cards" layout fingerprint on every render; when the fingerprint is unchanged it does not measure at all and never disturbs an animation in progress.
• Three-part choreography: the transiting card flies along a parabolic arc while lifting its shadow (z-index floats it to the top); the neighbouring cards in the same column close ranks in a straight line with a faster spring, so the landing spot in the target column "opens first"; and a ring-shaped landing glow appears in the target column at the same time.
• Changing column mid-flight: the previous flight immediately settles at its landing spot, then re-choreographs from the new starting point, keeping the state consistent.

Accessibility

• When the user has "reduce motion" enabled at the system level, cards arrive in place directly with no flight, and the layout structure is unchanged.
• The board is role="group", each column is role="list" (labelled with its title as aria-label), and cards are role="listitem".
• The landing glow is a decorative layer (aria-hidden, pointer-events-none) and affects neither layout measurement nor interaction.