🌏 Translated with the assistance of DeepSeek and ChatGPT
TextOutline
A lightweight component to add an outline (stroke) to text — useful for emphasized or decorative typography.
Basic Usage
Provide text as default slot. Use color to set the outline color and outlineWidth to control the stroke thickness.
Outlined Text
Outlined Text
Hide source code
Color Fill
color accepts any CSS color string (hex, rgb/rgba, named colors, gradients via CSS var or shorthand background values) and will be used as the text outline fill.
Outlined Text
Hide source code
Outline Width
outlineWidth controls the stroke width. When set as a number it is treated as pixels; strings are used verbatim (e.g. '0.1em', '2px').
Outlined Text
Outlined Text
Outlined Text
Outlined Text
Outlined Text
Outlined Text
Outlined Text
Outlined Text
Hide source code
API
TextOutlineProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| color | string | True | | Fill color — accepts any valid CSS color or background string (e.g. '#fff', 'rgba(255,0,0,0.8)', 'linear-gradient(...)'). | 0.0.3 |
| outlineWidth | number | string | True | 1 | Stroke width — accepts number or string. Number is treated as pixels (e.g. 1 → 1px); string is used verbatim (e.g. '0.1em', '2px'). Default 1. | 0.0.3 |
| autoPadding | boolean | True | true | Automatically adds left and right padding based on outline width to prevent the outline from being clipped. | 0.0.3 |
TextOutlineSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | Default slot for the text content. | 0.0.3 |