An interactive component which expands/collapses a panel.
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import {
4 Collapsible,
Installation
pnpm dlx sprawlify@latest add collapsiblenpx sprawlify@latest add collapsibleyarn sprawlify@latest add collapsiblebunx --bun sprawlify@latest add collapsible
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1<script lang="ts">
2import { Collapsible as CollapsiblePrimitive } from "@sprawlify/svelte/collapsible"
3import type { ComponentProps } from "svelte";
4
5interface Props extends ComponentProps<typeof CollapsiblePrimitive.Content> {}
6
7let { children, ...rest }: Props = $props()
8</script>
9
10<CollapsiblePrimitive.Content data-slot="collapsible-content" {...rest}>
11 {@render children?.()}
12</CollapsiblePrimitive.Content>1<script lang="ts">
2import { Collapsible as CollapsiblePrimitive } from "@sprawlify/svelte/collapsible"
3import type { ComponentProps } from "svelte";
4
5interface Props extends ComponentProps<typeof CollapsiblePrimitive.Trigger> {}
6
7let { children, ...rest }: Props = $props()
8</script>
9
10<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...rest}>
11 {@render children?.()}
12</CollapsiblePrimitive.Trigger>1<script lang="ts">
2import { Collapsible as CollapsiblePrimitive } from "@sprawlify/svelte/collapsible"
3import type { ComponentProps } from "svelte";
4
5interface Props extends ComponentProps<typeof CollapsiblePrimitive.Root> {}
6
7let { children, ...rest }: Props = $props()
8</script>
9
10<CollapsiblePrimitive.Root data-slot="collapsible" {...rest}>
11 {@render children?.()}
12</CollapsiblePrimitive.Root>1export { default as Collapsible } from "./collapsible.svelte";2export { default as CollapsibleTrigger } from "./collapsible-trigger.svelte";3export { default as CollapsibleContent } from "./collapsible-content.svelte";4Update the import paths to match your project setup.
Usage
1import {
2 Collapsible,
3 CollapsibleTrigger,
4 CollapsibleContent
5} from "@/components/ui/collapsible"1<Collapsible>
2 <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
3 <CollapsibleContent>
4 Yes. Free to use for personal and commercial projects. No attribution
5 required.
6 </CollapsibleContent>
7</Collapsible>Examples
Basic
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { Card, CardContent } from "@/components/ui/card"
4import {
File Tree
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import { Card, CardContent, CardHeader } from "@/components/ui/card"
4import {
Settings Panel
1<script lang="ts">
2import { Button } from "@/components/ui/button"
3import {
4 Card,
Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.