Component

GapTether

Drag the tether across its rail, or focus it and use the arrow keys. The gap becomes a real CSS grid separation between the two shelves while a cable records the chosen distance; Re-tether restores the starting gap.

Possible use

It could let a reviewer negotiate how far a handoff field should sit from its owner, or let a presenter physically distance an agenda item from its supporting status. The measurement creates tension without creating hierarchy.

Reasonable alternative

A reasonable local alternative is normal flow with one responsive gap value chosen in CSS. A draggable ruler is excessive authority for whitespace.

01 / Preview

Try it yourself.

Request

Owner

Deadline

Status

Mechanism

1: Start with four fields divided across two shelves.
2: Drag the tether, or focus it and use the arrow keys.
3: The real grid gap expands or contracts beneath the shelves.
4: Re-tether the shelves when their separation has made its point.

02 / Usage

Put it somewhere.

example.tsxTSX

import { GapTether } from "gra-ui";
import "gra-ui/styles.css";

export function SeparatedFields() {
  return (
    <GapTether>
      <span>Request</span>
      <span>Owner</span>
      <span>Deadline</span>
      <span>Status</span>
    </GapTether>
  );
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe pieces split across two shelves by the directly manipulated gap.