Pretext Balanced Text

Text wrapper that uses Pretext to balance line widths so all lines are roughly equal length. Deterministic and cross-browser consistent.

@chenglou/pretext

Installation

$ shadcn add @jalco/balanced-text

import { BalancedText } from "@/components/balanced-text"

<BalancedText text="Your heading or paragraph text" as="h2" maxWidth={400} />

Client component. The font prop must match the CSS font of the rendered text. Pretext uses Canvas-based measurement — no DOM reflow.

PropType

Pretext-powered. Uses @chenglou/pretext for pure-arithmetic text measurement.
Better than CSS text-wrap: balance. CSS balance only works up to ~6 lines, is inconsistent cross-browser, and can't be controlled. This works on any length and is deterministic.
Font matching. The font prop must match the CSS font shorthand of the rendered text. Include weight and size (e.g. '700 24px Inter').