Spoiler Reveal
A free text effect for an answer inside a sentence.
The answer is .
Customise
Code
<TextSpoilerReveal text="the brass key beneath the blue cup" revealLabel="Reveal answer" hideLabel="Hide answer" />Spoiler Reveal is a free text effect for Next.js and React that lets readers disclose one supplied phrase with a native button. Its opaque cover wipes aside while the answer stays in place, styled with Tailwind and selectable after disclosure.
Use it for an optional puzzle answer or a literary detail inside running text. The phrase is present in source HTML, so it does not protect secrets; with scripts disabled or in print, the full phrase is visible.
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-spoiler-revealUsage
import { TextSpoilerReveal } from "@/components/text-spoiler-reveal";
export function Puzzle() {
return <p>The answer is <TextSpoilerReveal
text="the brass key beneath the blue cup"
revealLabel="Reveal answer"
hideLabel="Hide answer"
/>.</p>;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | required | Supplied phrase. Empty text renders without a control or effect. |
| revealLabel | string | required | Meaningful visible label for the concealed state. Blank labels render plain text. |
| hideLabel | string | required | Meaningful visible label for the disclosed state. Blank labels render plain text. |
| revealed | boolean | undefined | Controlled actual state. Without onRevealedChange, the native button is read-only. |
| defaultRevealed | boolean | false | Initial uncontrolled state. A later text change preserves the reveal choice; key a new instance to reset. |
| onRevealedChange | (next: boolean) => void | undefined | Receives one requested next state per activation. Controlled callers decide whether to accept it. |
| className | string | undefined | Classes merged onto the inline root for consumer typography and layout. |
Customisation
The cover and ink default to foreground. Scope --spoiler-reveal-cover and --spoiler-reveal-ink to semantic colours in your theme; --spoiler-reveal-duration defaults to 240ms. The component retains the phrase and both label footprints in either state.
.review-detail {
--spoiler-reveal-cover: var(--foreground);
--spoiler-reveal-ink: var(--foreground);
--spoiler-reveal-duration: 240ms;
}Frequently asked questions
- Is Spoiler Reveal free for commercial use?
- Yes. The repository's MIT with Commons Clause licence permits use in personal and commercial products, including client sites. Keep the source licence notice. Reselling or repackaging the component catalogue itself is excluded; see LICENCE.md for the full terms.
- Can readers use Spoiler Reveal with a keyboard or without JavaScript?
- Yes. The action is a native button with visible labels and disclosure state, so Enter and Space work without custom key handling. With scripting disabled, a modern browser shows the full phrase and hides the enhanced control. The supplied phrase is already in page source and is not a way to protect secrets.
- How do I customise the wipe and control its state?
- Set the semantic cover and ink tokens and duration on a scoped wrapper. Pass revealed and onRevealedChange to own the state, or use defaultRevealed for an uncontrolled instance. The text remains selectable after disclosure, and print exposes it without changing your state.