Fit Text
Display text that scales to exactly fill its container width, with balanced multi-line mode, refitting on resize and font load.
Preview
Revenue, Q3
$1,284,500
One line, exactly the card's width.
Balanced on three lines
Small teams, steady releases, fewer late nights.
Drag the corner
99.98%
It refits as the box resizes.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | Text that fills the container width. |
| lines | number | 1 | Balance the words over this many lines, then fill the width. |
| min / max | number | 12 / 480 | Font size clamp in px. |
| fallbackSize | string | "3rem" | Size before measuring (server render, first paint). |
| as | "div" | "h1" | "h2" | "h3" | "p" | "div" | Element to render. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.