Show More

Keeps long content scannable, then reveals the complete detail in place.

Sivir components stay quiet until they are needed. ShowMore keeps dense prose readable by revealing a deliberate preview, then lets people open the complete detail without leaving their place in the page.

It measures the rendered content, so the disclosure only appears when there is actually more to read. When the full text fits inside the line budget, no toggle renders at all.

Expanded content can also cap at a maximum height, turning into a keyboard-focusable scroll region for very long bodies like release notes or transcripts.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add show-more

Usage

The disclosure is shown only when content exceeds lines. Bind expanded when another control needs to coordinate the state.

import { ShowMore } from '$lib/sivir/components/show-more';

let expanded = $state(false);

<ShowMore bind:expanded lines={3} maxHeight={320} label="Release notes">
  <p>{releaseNotes}</p>
</ShowMore>

Examples

Capped content

When expanded content exceeds maxHeight, it becomes a keyboard-focusable scroll region.

Release note 1: the component retains its layout while content changes.

Release note 2: the component retains its layout while content changes.

Release note 3: the component retains its layout while content changes.

Release note 4: the component retains its layout while content changes.

Release note 5: the component retains its layout while content changes.

Release note 6: the component retains its layout while content changes.

Release note 7: the component retains its layout while content changes.

Release note 8: the component retains its layout while content changes.

Release note 9: the component retains its layout while content changes.

Release note 10: the component retains its layout while content changes.

Anatomy

ShowMore - Clamps long content and expands it on demand.