Sivir UI
79

Show More

Clamps content to a set number of lines and expands it in place. The toggle renders only when the content is taller than the clamp.

On March 4, checkout requests in the EU region failed for 23 minutes after a configuration change lowered the connection pool limit on the payments database from 200 to 20.

Client retries tripled traffic to the API during the outage, which slowed recovery after the limit was restored. About 1,800 orders failed, and none of those customers were charged.

We now validate pool limits in CI, cap client retries at three with backoff, and page the on-call engineer when the checkout error rate stays above 2% for five minutes.

<script lang="ts">
    import { ShowMore } from '@sivir-ui/svelte/components/show-more';

    const paragraphs = [
        'On March 4, checkout requests in the EU region failed for 23 minutes after a configuration change lowered the connection pool limit on the payments database from 200 to 20.',
        'Client retries tripled traffic to the API during the outage, which slowed recovery after the limit was restored. About 1,800 orders failed, and none of those customers were charged.',
        'We now validate pool limits in CI, cap client retries at three with backoff, and page the on-call engineer when the checkout error rate stays above 2% for five minutes.'
    ];
</script>

<div class="w-full max-w-md">
    <ShowMore lines={2} label="Incident summary">
        <div class="flex flex-col gap-2">
            {#each paragraphs as paragraph (paragraph)}
                <p>{paragraph}</p>
            {/each}
        </div>
    </ShowMore>
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add show-more

Usage

lines sets the collapsed height and defaults to 3. Expanded content taller than maxHeight (320px by default) scrolls, and label names that scroll region. Bind expanded when another control needs to coordinate the state.

import { ShowMore } from '@sivir-ui/svelte/components/show-more';

let expanded = $state(false);

<ShowMore bind:expanded lines={3} label="Release notes">
  <p>Version 2.4 adds offline drafts, faster search across archived threads, and a fix for attachments failing to upload on slow connections.</p>
</ShowMore>

Examples

Capped content

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

2.9.0: Adds keyboard shortcuts for archiving and snoozing threads.

2.8.2: Fixes attachments over 25 MB failing to upload in Safari.

2.8.1: Restores unread counts after switching workspaces.

2.8.0: Adds scheduled send with a time zone picker.

2.7.3: Fixes search skipping messages older than one year.

2.7.2: Reduces memory use in threads with more than 500 replies.

2.7.1: Fixes drafts being lost when the laptop wakes from sleep.

2.7.0: Adds shared labels for team inboxes.

2.6.1: Fixes calendar invites showing the wrong time zone.

2.6.0: Adds a dark theme.

<script lang="ts">
    import { ShowMore } from '@sivir-ui/svelte/components/show-more';

    const entries = [
        '2.9.0: Adds keyboard shortcuts for archiving and snoozing threads.',
        '2.8.2: Fixes attachments over 25 MB failing to upload in Safari.',
        '2.8.1: Restores unread counts after switching workspaces.',
        '2.8.0: Adds scheduled send with a time zone picker.',
        '2.7.3: Fixes search skipping messages older than one year.',
        '2.7.2: Reduces memory use in threads with more than 500 replies.',
        '2.7.1: Fixes drafts being lost when the laptop wakes from sleep.',
        '2.7.0: Adds shared labels for team inboxes.',
        '2.6.1: Fixes calendar invites showing the wrong time zone.',
        '2.6.0: Adds a dark theme.'
    ];
</script>

<ShowMore lines={2} maxHeight={112} label="Release notes">
    <div class="flex flex-col gap-2">
        {#each entries as entry (entry)}
            <p>{entry}</p>
        {/each}
    </div>
</ShowMore>

Anatomy

ShowMore - Clamps long content and expands it on demand.