Strike-through

Cross out a word and write the new one.

This meeting could have been an 👍 (replaces email)

Installation

$ npx shadcn@latest add @textlab/strike-through

Needs @textlab in your components.json. Setup takes a minute.

Usage

usage.tsx

import { StrikeThrough } from "@/components/textlab/strike-through/strike-through";

<p>Meetings that could have been an <StrikeThrough text="email" variant="replace" replacement="👍" /></p>

Variants

replacelinescribble

Props

Prop	Type	Default	Description
text*	string	–	The copy.
variant	"replace" \| "line" \| "scribble"	"line"	Cross out and write a correction, a single line, or a scratch-out.
replacement	string	–	The correction written above, for replace.
color	string	var(--tl-accent)	Pen color.
thickness	number	3	Stroke width in px.
as	ElementType	"span"	Rendered element.
trigger	"mount" \| "inView" \| "hover" \| "manual"	"inView"	What starts the animation. manual follows `active`.
active	boolean	false	Drives trigger="manual".
once	boolean	true	In view: play once instead of on every entry.
delay	number	0	Seconds before the first part moves.
duration	number	0.5	Seconds each part takes.
reducedMotion	"user" \| "always" \| "never"	"user"	user follows the OS setting; always shows the still version.
className	string	–	Merged onto the root.

When to use it

Reach for it

Witty headlines that correct themselves.
Pricing before and after, changelog wording.

Skip it

Legal or factual corrections; use <del> and <ins> styled plainly.
More than one per line.

Accessibility

Screen readers hear the meaning: the replacement and what it replaces, or that the word is struck out.
The pen line and correction are decorative.

Motion

The old word dims just after the pen passes, the correction arrives last.

Reduced motion. Shown already struck, with the correction in place.

Performance

One path and one small text element.