Spoiler / Show More

Collapses long content to `maxHeight` with a fade and a Show more / Show less toggle (only when it actually overflows).

Import

import { Spoiler, SpoilerText } from '@marbleui/ui'

Props

<Spoiler>

Prop	Type	Default
children *required	`ReactNode`	`—`
className	`string`	`—`
hideLabel	`string`	`'Show less'`
maxHeight	`number`	`120`
showLabel	`string`	`'Show more'`

<SpoilerText>

Inline text hidden behind a blur until revealed (book/film spoilers, secrets). The hidden text isn't exposed until revealed; revealing moves focus to the text, since the button it replaces is gone.

Prop	Type	Default	Description
children *required	`string`	`—`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Spoiler collapses long content to a set height with a fade and a Show more / Show less button; SpoilerText blurs an inline phrase until pressed. For a titled collapsible section use Disclosure.

<Spoiler maxHeight={160}>
  <ReleaseNotes />
</Spoiler>
<p>The killer turns out to be <SpoilerText>the narrator all along</SpoilerText>.</p>

The button appears only when content is taller than maxHeight (pixels, default 120), re-measured on resize. showLabel and hideLabel set its text; open state is internal.
Collapsed content is clipped, not hidden: screen readers read all of it, and links in the clipped part still take Tab focus.
The fade uses the page background color, so it can show as a band on a card of another color.
SpoilerText takes a string. Until revealed, assistive tech hears a “Reveal hidden text” button. Revealing is one-way and replaces the button with the text, which then receives focus.

Example source · show

import { Spoiler, SpoilerText } from './spoiler'

export const styles = {
  'Show more': () => <Spoiler className="w-96 text-sm text-fg">{Array.from({ length: 5 }, (_, i) => <p key={i} className="mb-2">Release notes {i + 1}: new components, fixes and improvements across the library, including data grid column resizing, faster markdown streaming, and dark-mode chart palettes.</p>)}</Spoiler>,
  Inline: () => <p className="w-96 text-sm text-fg">The killer turns out to be <SpoilerText>the narrator all along</SpoilerText>, which explains the missing chapter.</p>,
}

Source: packages/ui/src/spoiler/spoiler.tsx

Catalog

Category: data-display
Priority: Extra
Primitive: composed
React Aria: Disclosure
Base UI: Collapsible