Component

IndentTether

Drag the tether, use the arrow keys, or jump to either end of the ruler. The child stays in flow but receives the exact chosen indentation, so direct manipulation changes the actual spacing rather than merely moving a marker.

Possible use

It could let a reviewer drag a handoff note toward the margin where a discussion happens, or let a presenter park an agenda line at the exact distance from its slide edge that feels official. Neither use improves alignment beyond normal layout rules.

Reasonable alternative

A reasonable local alternative is normal flow with a deliberate padding value or one alignment class. A pointer-controlled ruler should not own a document’s margin.

01 / Preview

Try it yourself.

Park this note in the margin

Mechanism

1: Drag the tether across the ruler, or use the arrow keys.
2: The notice receives the exact resulting indentation in flow.
3: Return it to the margin when the tether has made its point.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function TetheredNotice() {
  return <IndentTether><span>Park this note in the margin</span></IndentTether>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe notice whose actual indentation follows the tether.