Text Stroke / Outline Text React component
Big outlined lettering with fading echoes stacked beneath it, and a solid fill that follows the pointer through the word.
About the Text Stroke / Outline Text component
Text Stroke turns a word into pure line: an outline with fading echoes stacked beneath it. Move the pointer across and a solid fill follows inside the letters.
It works at any size and takes its colour from your page, so it fits a big poster word as well as a section divider.
When to use it
Use it for large display words on portfolio, agency and event pages.
Keep it for big type. Below about 40px the outline gets hard to read.
Installation
Add the Text Stroke / Outline Text component to your project with the shadcn CLI. It lands in components/text-stroke.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/text-strokeProps
<TextStroke /> accepts 4 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| text | string | "OUTLINE" |
| strokeWidth Outline thickness, in px. | number | 1.5 |
| echoes Outlined copies stacked beneath the word. | number | 3 |
| fillRadius Radius of the solid fill that follows the pointer, in px. Set 0 to turn it off. | number | 130 |
- textstringDefault: "OUTLINE"
- strokeWidth
Outline thickness, in px.
numberDefault: 1.5 - echoes
Outlined copies stacked beneath the word.
numberDefault: 3 - fillRadius
Radius of the solid fill that follows the pointer, in px. Set 0 to turn it off.
numberDefault: 130
Text Stroke / Outline Text FAQ
- Can I turn off the fill or the echoes?
- Yes. Set fillRadius or echoes to 0.
- Does it need a special font?
- No, though heavy weights give the outline more presence.
- Does it work on phones?
- The outline and echoes do. The fill follows a mouse, so it stays off on touch screens.
- Is the text readable by screen readers?
- Yes. The word is the label, and the copies are hidden from them.
