Stroke Text
Free
Outlined text that fills with color on hover or focus, sweeping in from the left, the bottom or the center.
PlayLevelsCredits
Hover or focus a word
Customize
Direction
1.5px
#ff784f
0.5s
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/stroke-text.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/stroke-text.tsx.
Usage
import { StrokeText } from "@/components/ui/stroke-text";
<StrokeText text="Play" direction="left" fillColor="#ff784f" className="text-8xl font-black uppercase" />Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text to outline. |
| direction | "left" | "bottom" | "center" | "left" | Where the fill sweeps in from. |
| strokeWidth | number | 1.5 | Outline width in pixels. |
| strokeColor | string | "#f4ede3" | Color of the outline. |
| fillColor | string | "#ff784f" | Color the text fills with. |
| duration | number | 0.5 | Seconds for the fill to sweep across. |
| active | boolean | false | Keep the text filled, for example for the current page in a menu. |
| focusable | boolean | true | Make the text a tab stop. Turn off inside a link or button and drive it with active. |
| className | string | — | Extra classes for the text. |
Dependencies: motion