Collapsible

A single panel that expands and collapses on demand.

Discussed progress on upcoming features, team capacity, and timeline. Reviewed latest design feedback and aligned on next steps for the studio redesign rollout.

• Ship the studio redesign by end of quarter
• Draft v2 migration guide for customers
• Review pricing experiment results with finance

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add collapsible

Usage

Import the Collapsible components and use them:

import * as Collapsible from '$lib/sivir/components/collapsible';

let open = $state();

<Collapsible.Root bind:open>
  <Collapsible.Trigger>Trigger</Collapsible.Trigger>
  <Collapsible.Content>Content</Collapsible.Content>
</Collapsible.Root>

Examples

Default

Anatomy

Collapsible.Root - Controls collapsible content state.

Collapsible.Trigger - Toggles the content.

Collapsible.Content - Contains collapsible content.