---
title: "Spoiler"
description: "Inline text hidden behind a dark block until the reader clicks to reveal it."
---

Inline text hidden behind a dark block until the reader clicks to reveal it. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Spoiler — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add spoiler
```

Files written — React: components/ui/spoiler.tsx. Vue: components/ui/spoiler/Spoiler.vue, components/ui/spoiler/index.ts.

## Usage

React:

```tsx
import { Spoiler } from "@/components/ui/spoiler"
```

Vue:

```ts
import { Spoiler } from "@/components/ui/spoiler"
```

## API reference

**`Spoiler`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `revealed` | `boolean \| undefined` | — | Controlled revealed state. |
| `defaultRevealed` | `boolean \| undefined` | — | Initial revealed state when uncontrolled. |
| `onRevealedChange` | `(revealed: boolean) => void \| undefined` | — | Called with the next revealed state when toggled. |

The registry exports `Spoiler`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

The reveal control must be keyboard operable and expose its expanded state. Do not place essential instructions only inside hidden spoiler content.

## Tokens

Spoiler reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.