Collapsible

An interactive component which expands and collapses a panel.

File Tree

Settings

Radius

Set the corner radius of the element.

<script lang="ts" module>
  type FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] };
</script>

<script lang="ts">
  import type { Snippet } from 'svelte';
  import type { HTMLAttributes } from 'svelte/elements';
  import { Button } from '@sveltery/components/button';
  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@sveltery/components/card';
  import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@sveltery/components/collapsible';
  import { Example, ExampleWrapper } from '@sveltery/components/example';
  import { Field, FieldGroup, FieldLabel } from '@sveltery/components/field';
  import { IconPlaceholder } from '@sveltery/components/icons';
  import { Input } from '@sveltery/components/input';
  import { Tabs, TabsList, TabsTrigger } from '@sveltery/components/tabs';

  const fileTree: FileTreeItem[] = [
    {
      name: 'components',
      items: [
        {
          name: 'ui',
          items: [
            { name: 'button.svelte' },
            { name: 'card.svelte' },
            { name: 'dialog.svelte' },
            { name: 'input.svelte' },
            { name: 'select.svelte' },
            { name: 'table.svelte' },
          ],
        },
        { name: 'login-form.svelte' },
        { name: 'register-form.svelte' },
      ],
    },
    {
      name: 'lib',
      items: [{ name: 'utils.ts' }, { name: 'cn.ts' }, { name: 'api.ts' }],
    },
    {
      name: 'hooks',
      items: [{ name: 'use-media-query.ts' }, { name: 'use-debounce.ts' }, { name: 'use-local-storage.ts' }],
    },
    {
      name: 'types',
      items: [{ name: 'index.d.ts' }, { name: 'api.d.ts' }],
    },
    {
      name: 'public',
      items: [{ name: 'favicon.ico' }, { name: 'logo.svg' }, { name: 'images' }],
    },
    { name: 'app.svelte' },
    { name: 'layout.svelte' },
    { name: 'globals.css' },
    { name: 'package.json' },
    { name: 'tsconfig.json' },
    { name: 'README.md' },
    { name: '.gitignore' },
  ];

  let settingsOpen = $state(false);
</script>

{#snippet folderTrigger(props: HTMLAttributes<HTMLElement>, _state: unknown, children?: Snippet)}
  <Button {...props} variant="ghost" size="sm" class="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground">
    {@render children?.()}
  </Button>
{/snippet}

{#snippet settingsTrigger(props: HTMLAttributes<HTMLElement>, _state: unknown, children?: Snippet)}
  <Button {...props} variant="outline" size="icon">
    {@render children?.()}
  </Button>
{/snippet}

{#snippet renderItem(fileItem: FileTreeItem)}
  {#if 'items' in fileItem}
    <Collapsible>
      <CollapsibleTrigger render={folderTrigger}>
        <IconPlaceholder
          lucide="ChevronRightIcon"
          tabler="IconChevronRight"
          hugeicons="ArrowRight01Icon"
          phosphor="CaretRightIcon"
          remixicon="RiArrowRightSLine"
          class="transition-transform group-data-panel-open:rotate-90"
        />
        <IconPlaceholder lucide="FolderIcon" tabler="IconFolder" hugeicons="Folder01Icon" phosphor="FolderIcon" remixicon="RiFolderLine" />
        {fileItem.name}
      </CollapsibleTrigger>
      <CollapsibleContent class="mt-1 ml-5 style-lyra:ml-4">
        <div class="flex flex-col gap-1">
          {#each fileItem.items as child (child.name)}
            {@render renderItem(child)}
          {/each}
        </div>
      </CollapsibleContent>
    </Collapsible>
  {:else}
    <Button variant="link" size="sm" class="w-full justify-start gap-2 text-foreground">
      <IconPlaceholder lucide="FileIcon" tabler="IconFile" hugeicons="File01Icon" phosphor="FileIcon" remixicon="RiFileLine" />
      <span>{fileItem.name}</span>
    </Button>
  {/if}
{/snippet}

<ExampleWrapper>
  <Example title="File Tree" class="items-center">
    <Card class="mx-auto w-full max-w-[16rem] gap-2" size="sm">
      <CardHeader>
        <Tabs defaultValue="explorer">
          <TabsList class="w-full">
            <TabsTrigger value="explorer">Explorer</TabsTrigger>
            <TabsTrigger value="settings">Outline</TabsTrigger>
          </TabsList>
        </Tabs>
      </CardHeader>
      <CardContent>
        <div class="flex flex-col gap-1">
          {#each fileTree as item (item.name)}
            {@render renderItem(item)}
          {/each}
        </div>
      </CardContent>
    </Card>
  </Example>

  <Example title="Settings" class="items-center">
    <Card class="mx-auto w-full max-w-xs" size="sm">
      <CardHeader>
        <CardTitle>Radius</CardTitle>
        <CardDescription>Set the corner radius of the element.</CardDescription>
      </CardHeader>
      <CardContent>
        <Collapsible bind:open={settingsOpen} class="flex items-start gap-2">
          <FieldGroup class="grid w-full grid-cols-2 gap-2">
            <Field>
              <FieldLabel for="radius-x" class="sr-only">Radius X</FieldLabel>
              <Input id="radius-x" placeholder="0" defaultValue={0} />
            </Field>
            <Field>
              <FieldLabel for="radius-y" class="sr-only">Radius Y</FieldLabel>
              <Input id="radius-y" placeholder="0" defaultValue={0} />
            </Field>
            <CollapsibleContent class="col-span-full grid grid-cols-subgrid gap-2">
              <Field>
                <FieldLabel for="radius-tl" class="sr-only">Radius X</FieldLabel>
                <Input id="radius-tl" placeholder="0" defaultValue={0} />
              </Field>
              <Field>
                <FieldLabel for="radius-br" class="sr-only">Radius Y</FieldLabel>
                <Input id="radius-br" placeholder="0" defaultValue={0} />
              </Field>
            </CollapsibleContent>
          </FieldGroup>
          <CollapsibleTrigger render={settingsTrigger}>
            {#if settingsOpen}
              <IconPlaceholder lucide="MinimizeIcon" tabler="IconMinimize" hugeicons="MinusSignIcon" phosphor="MinusIcon" remixicon="RiSubtractLine" />
            {:else}
              <IconPlaceholder lucide="MaximizeIcon" tabler="IconMaximize" hugeicons="PlusSignIcon" phosphor="PlusIcon" remixicon="RiAddLine" />
            {/if}
          </CollapsibleTrigger>
        </Collapsible>
      </CardContent>
    </Card>
  </Example>
</ExampleWrapper>

Installation

Install the dependencies

pnpm add github:sveltery/base

Copy the component

Copy the following files into src/lib/components/ui/collapsible.

src/lib/components/ui/collapsible/Collapsible.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Collapsible as Primitive } from '@sveltery/base/collapsible';
  let { open = $bindable(), children, ...props }: ComponentProps<typeof Primitive.Root> = $props();
</script>
<Primitive.Root data-slot="collapsible" bind:open {children} {...props} />

src/lib/components/ui/collapsible/CollapsibleContent.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Collapsible as Primitive } from '@sveltery/base/collapsible';
  let { children, ...props }: ComponentProps<typeof Primitive.Panel> = $props();
</script>
<Primitive.Panel data-slot="collapsible-content" {children} {...props} />

src/lib/components/ui/collapsible/CollapsibleTrigger.svelte

<script lang="ts">
  import type { ComponentProps } from 'svelte';
  import { Collapsible as Primitive } from '@sveltery/base/collapsible';
  let { children, ...props }: ComponentProps<typeof Primitive.Trigger> = $props();
</script>
<Primitive.Trigger data-slot="collapsible-trigger" {children} {...props} />

src/lib/components/ui/collapsible/index.ts

export { default as Collapsible } from './Collapsible.svelte';
export { default as CollapsibleTrigger } from './CollapsibleTrigger.svelte';
export { default as CollapsibleContent } from './CollapsibleContent.svelte';

Update the import paths

Change the imports to match your project setup.

Usage

<script lang="ts">
  import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '$lib/components/ui/collapsible';
</script>

<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution required.
  </CollapsibleContent>
</Collapsible>

Composition

Collapsible
├── CollapsibleTrigger
└── CollapsibleContent

Controlled state

Bind open to read and set the state.

<script lang="ts">
  let open = $state(false);
</script>

<Collapsible bind:open>
  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
  <CollapsibleContent>Content</CollapsibleContent>
</Collapsible>

Custom trigger

Pass a render snippet to CollapsibleTrigger to render another element, such as a Button. Spread props onto it and render children.

{#snippet button(props, state, children)}
  <Button {...props} variant="outline" size="icon">{@render children?.()}</Button>
{/snippet}

<CollapsibleTrigger render={button}>…</CollapsibleTrigger>

Collapsible is styled on top of the Sveltery Base Collapsible primitive, which owns its behavior, open state and accessibility. See the Base UI Collapsible documentation for the behavior it ports.