Fit Heading
A responsive text effect that sizes the headline to its space.
Campaign / Fieldnotes
Make every word count, at every width.
An editorial headline remains itself while its container changes.
Customise
Code
<TextFitHeading>
A clear idea deserves room to grow.
</TextFitHeading>Fit Heading is a free responsive text effect for React, Next.js and Tailwind. It measures a semantic heading and uses the largest font size in a readable range that fits its container.
Use it for a campaign title that should hold its shape as its column changes. Copy remains intact, wraps at the size floor, and stays visible as ordinary text when JavaScript is unavailable.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-fit-headingUsage
import { TextFitHeading } from "@/components/text-fit-heading";
export default function CampaignTitle() {
return (
<TextFitHeading as="h1" minFontSize={24} maxFontSize={96}>
A clear idea deserves room to grow.
</TextFitHeading>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | Complete plain-text heading copy. Rich text is not split or measured. |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h2" | Native semantic heading level. |
| minFontSize | number | 24 | Minimum CSS-pixel font size, clamped to 16–128. At the floor, long copy wraps instead of clipping. |
| maxFontSize | number | 88 | Maximum CSS-pixel font size, clamped to 16–128 and never below the effective minimum. |
| className | string | undefined | Merged onto the heading for consumer-owned typography, colour, width and spacing. |
Customisation
Set the measured range in CSS pixels with minFontSize and maxFontSize. The defaults are 24px and 88px; the accepted range is 16px to 128px. Add font family, weight, tracking, colour and width utilities with className. If the text cannot fit at the floor, it wraps and remains complete.
<TextFitHeading
as="h1"
minFontSize={28}
maxFontSize={104}
className="max-w-5xl font-serif font-medium tracking-tight text-balance"
>
A clear idea deserves room to grow.
</TextFitHeading>Frequently asked questions
- Is Fit Heading free for commercial use?
- Yes. The repository's MIT with Commons Clause licence permits personal and commercial products, including client websites. Keep the source licence notice. Selling or repackaging the component catalogue itself is excluded; see LICENCE.md for the full terms.
- Does the heading work without JavaScript?
- The server renders the complete native heading at its maximum size with ordinary wrapping. JavaScript enhances it by fitting the size to the measured container; without JavaScript the heading remains visible and readable, although it does not auto-size.
- What happens when a long title cannot fit?
- The component keeps the configured minimum font size and wraps the full text without truncation. It remeasures after container, copy or font changes. Use className for typography and layout; the component does not animate or rewrite the text.