Fit Word
Fit a display word to a chosen share of its container using the width of the loaded font.
- Dependencies
- No extra packages
- Size
- 104 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/fit-word.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/fit-word.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the fit-word.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| word | string | "STRAWBERRY" | The word to fit. Keep it to one line. |
| fill | number | 0.9 | Share of the container width the word occupies. |
| maxRatio | number | 0.25 | Font-size ceiling as a share of the width, so short words stay in proportion. |
| weight | number | 800 | Font weight; the measurement reads the element's computed weight. |
| tracking | number | -0.075 | Letter-spacing in em. As in the original it is not measured, so negative tracking lands slightly inside the fill. |
| lineHeight | number | 0.88 | Line-height of the word. |
| color | string | "#4d192b" | Fill, or stroke colour when outlined. |
| outline | boolean | false | Hollow letters with a max(1px, 0.012em) text stroke. |
| align | "left" | "center" | "right" | "center" | Where the word sits inside the frame. |
| decorative | boolean | true | aria-hidden, as in the original where the word repeats the product name; set false when it is the only label. |