Docs
Collapsible
Collapsible
An interactive component which expands/collapses a panel.
Loading...
<script lang="ts">
import CaretSort from "svelte-radix/CaretSort.svelte";
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Collapsible.Root class="w-[350px] space-y-2">
<div class="flex items-center justify-between space-x-4 px-4">
<h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
<Collapsible.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
<CaretSort class="h-4 w-4" />
<span class="sr-only">Toggle</span>
</Button>
</Collapsible.Trigger>
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@huntabyte/bits-ui
</div>
<Collapsible.Content class="space-y-2">
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@melt-ui/melt-ui
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@sveltejs/svelte
</div>
</Collapsible.Content>
</Collapsible.Root>
<script lang="ts">
import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
import { Button } from "$lib/components/ui/button/index.js";
</script>
<Collapsible.Root class="w-[350px] space-y-2">
<div class="flex items-center justify-between space-x-4 px-4">
<h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
<Collapsible.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" size="sm" class="w-9 p-0">
<ChevronsUpDown class="h-4 w-4" />
<span class="sr-only">Toggle</span>
</Button>
</Collapsible.Trigger>
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@huntabyte/bits-ui
</div>
<Collapsible.Content class="space-y-2">
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@melt-ui/melt-ui
</div>
<div class="rounded-md border px-4 py-3 font-mono text-sm">
@sveltejs/svelte
</div>
</Collapsible.Content>
</Collapsible.Root>
Installation
npx shadcn-svelte@latest add collapsible
Usage
<script lang="ts">
import * as Collapsible from "$lib/components/ui/collapsible";
</script>
<Collapsible.Root>
<Collapsible.Trigger>Can I use this in my project?</Collapsible.Trigger>
<Collapsible.Content>
Yes. Free to use for personal and commercial projects. No attribution
required.
</Collapsible.Content>
</Collapsible.Root>