Completion Strike
A reversible completion annotation for intact text effects.
Print studio / Production
Material preparation
Mark the physical proof ready for press.
Customise
Code
<TextCompletionStrike complete={false}>
Prepare the paper proof
</TextCompletionStrike>Completion Strike is a free text effect for Next.js and React that marks a controlled phrase as complete. It keeps the text readable, selectable and naturally wrapped while a line moves across each actual text line.
Use it with your own native checkbox in a checklist or prerequisite list. Tailwind styling follows the surrounding typography, while the server and no-JavaScript view show the requested state with a native line-through.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-completion-strikeUsage
"use client";
import { useState } from "react";
import { TextCompletionStrike } from "@/components/text-completion-strike";
export function ProofStep() {
const [complete, setComplete] = useState(false);
return (
<label>
<input type="checkbox" checked={complete} onChange={(event) => setComplete(event.target.checked)} />
<TextCompletionStrike complete={complete}>Prepare the paper proof</TextCompletionStrike>
</label>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | One intact, selectable phrase. Empty text has no decoration or observer. |
| complete | boolean | required | Controlled completion state. Supply a native control or other semantics outside the effect. |
| completionLabel | string | undefined | Optional non-live screen-reader status when the surrounding control does not convey completion. |
| className | string | undefined | Merged consumer typography, width and layout classes. |
Customisation
The line inherits foreground ink through --completion-strike-ink. Scope --completion-strike-width and --completion-strike-duration on a consumer container to tune the 1.5px, 240ms defaults. The phrase inherits typography and direction; no strike-shape variants are added.
.launch-list {
--completion-strike-ink: var(--foreground);
--completion-strike-width: 1.5px;
--completion-strike-duration: 240ms;
}Frequently asked questions
- Is Completion Strike free for commercial use?
- Yes. The repository licence permits commercial products and client sites. Keep the source licence notice, and see LICENCE.md for redistribution terms.
- Does Completion Strike work without JavaScript or with reduced motion?
- The server renders the phrase with native line-through when complete. If measurement is unavailable, that fallback remains. Reduced motion and print show the requested state without line movement.
- Can I change the line colour, width or speed?
- Scope the three completion-strike CSS properties on a container. The line follows the actual wrapped phrase and leaves the glyphs in normal flow.