Collapsible
An interactive component which expands and collapses a panel.
Loading preview…
1<script lang="ts">
2 import ChevronsUpDownIcon from '@lucide/svelte/icons/chevrons-up-down';
3 import { buttonVariants } from '../button/index.js';
4 import * as Collapsible from './index.js';
5</script>
6
7<Collapsible.Root class="w-[350px] space-y-2">
8 <div class="flex items-center justify-between space-x-4 px-4">
9 <h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
10 <Collapsible.Trigger class={buttonVariants({ variant: 'ghost', size: 'sm', class: 'w-9 p-0' })}>
11 <ChevronsUpDownIcon />
12 <span class="sr-only">Toggle</span>
13 </Collapsible.Trigger>
14 </div>
15 <div class="rounded-md border px-4 py-3 font-mono text-sm">@huntabyte/bits-ui</div>
16 <Collapsible.Content class="space-y-2">
17 <div class="rounded-md border px-4 py-3 font-mono text-sm">@melt-ui/melt-ui</div>
18 <div class="rounded-md border px-4 py-3 font-mono text-sm">@sveltejs/svelte</div>
19 </Collapsible.Content>
20</Collapsible.Root>
21Installation
1. Install dependencies
2. Copy these files into your project
- ~/components/collapsible/index.ts
- ~/components/collapsible/collapsible.svelte
- ~/components/collapsible/collapsible-trigger.svelte
- ~/components/collapsible/collapsible-content.svelte
Usage
Use collapsible for a single expandable section. Bind open on the root, and compose with Collapsible.Trigger and Collapsible.Content.
1<script lang="ts">
2 import * as Collapsible from '~/components/collapsible';
3</script>
4
5<Collapsible.Root>
6 <Collapsible.Trigger>Can I use this in my project?</Collapsible.Trigger>
7 <Collapsible.Content>
8 Yes. Free to use for personal and commercial projects. No attribution required.
9 </Collapsible.Content>
10</Collapsible.Root>