Spoiler

Default

Content taller than maxHeight (default 100 px) is clipped with a gradient fade and a Show more control appears below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

<Spoiler>
  <Text size="sm">{longContent}</Text>
</Spoiler>

Custom max height

Set maxHeight (pixels) to control the clipping threshold.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

<Spoiler maxHeight={60}>
  <Text size="sm">{longContent}</Text>
</Spoiler>

Custom labels

Change the toggle labels with showLabel and hideLabel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

<Spoiler showLabel="Read the full article" hideLabel="Collapse">
  <Text size="sm">{content}</Text>
</Spoiler>

Initially expanded

Pass initiallyExpanded to start the component in the open state.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

<Spoiler initiallyExpanded>
  <Text size="sm">{content}</Text>
</Spoiler>

Clickable content

Set clickable to let users expand the spoiler by clicking anywhere in the content area, not just the Show more control.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

<Spoiler clickable>
  <Text size="sm">{content}</Text>
</Spoiler>

Blur overlay

Set blur to apply a blur filter to clipped content instead of the gradient fade. Works well combined with clickable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

<Spoiler blur clickable>
  <Text size="sm">{content}</Text>
</Spoiler>

Image with blur

Blur works naturally with images — the clipped portion is obscured until the user clicks or hits Show more.

<Spoiler blur={12} clickable maxHeight={200} showLabel="Reveal image" hideLabel="Collapse">
  <Image src="/photo.jpg" alt="…" width="100%" fit="cover" />
</Spoiler>

Short content

When the content is shorter than maxHeight, the fade and control are not visible but the component still renders — toggle appears only when needed.

Short content that fits within the max height.

<Spoiler>
  <Text size="sm">Short content that fits within the max height.</Text>
</Spoiler>

Prop	Type	Default	Description
`maxHeight`	`number`	`100`	Clip height in pixels; content taller than this gets truncated
`showLabel`	`string`	`'Show more'`	Label for the expand control
`hideLabel`	`string`	`'Show less'`	Label for the collapse control
`initiallyExpanded`	`boolean`	`false`	Start the component in the expanded state
`clickable`	`boolean`	`false`	Clicking anywhere in the content area expands the spoiler
`blur`	`boolean \| number`	`false`	Apply a blur filter to clipped content instead of a gradient fade. Pass `true` for the default (4 px) or a pixel number for a custom level — e.g. `blur={8}`.