Browse components
Stroke Text
Outlined lettering that draws its stroke, then wipes in a solid fill on view or on hover.
Installation
npx shadcn@latest add @glint-ui/stroke-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/stroke-text.json
Usage
import { StrokeText } from "@/components/ui/stroke-text";
<StrokeText text="Outline" className="text-8xl font-black" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Outline" | Text to draw. |
| strokeColor | string | "#bef264" | Outline color. |
| fillColor | string | "#ecfccb" | Fill color. |
| strokeWidth | number | 1.2 | Outline thickness, % of font size. |
| duration | number | 2200 | Ms for draw and fill. |
| trigger | "view" | "hover" | "view" | Fill on view or while hovered. |
| className | string | — | Extra classes for the root element. |