Collapsible

An interactive component which expands/collapses a panel.

1import { createSignal } from "solid-js";2import { Button } from "@/components/ui/button";3import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";4import { ChevronsUpDown } from "lucide-solid";

Installation


pnpm dlx sprawlify@latest add collapsible
npx sprawlify@latest add collapsible
yarn sprawlify@latest add collapsible
bunx --bun sprawlify@latest add collapsible

Install the following dependencies:


pnpm add @sprawlify/primitives @sprawlify/solid
npm install @sprawlify/primitives @sprawlify/solid
yarn add @sprawlify/primitives @sprawlify/solid
bun add @sprawlify/primitives @sprawlify/solid

Add the following files to your project:

collapsible.tsx

1import { Collapsible as CollapsiblePrimitive } from "@sprawlify/solid/collapsible";2import type { ComponentProps } from "solid-js";34function Collapsible(props: ComponentProps<typeof CollapsiblePrimitive.Root>) {5  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;6}78function CollapsibleTrigger(props: ComponentProps<typeof CollapsiblePrimitive.Trigger>) {9  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;10}1112function CollapsibleContent(props: ComponentProps<typeof CollapsiblePrimitive.Content>) {13  return <CollapsiblePrimitive.Content data-slot="collapsible-content" {...props} />;14}1516export { Collapsible, CollapsibleTrigger, CollapsibleContent };17

Update 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

1import { Button } from "@/components/ui/button";2import { Card, CardContent } from "@/components/ui/card";3import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";4import { ChevronDownIcon } from "lucide-solid";

File Tree

Use nested collapsibles to build a file tree.

1import { Button } from "@/components/ui/button";2import { Card, CardContent, CardHeader } from "@/components/ui/card";3import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";4import { ChevronRightIcon, FileIcon, FolderIcon } from "lucide-solid";

Settings Panel

Use a trigger button to reveal additional settings.

1import { createSignal } from "solid-js";2import { Button } from "@/components/ui/button";3import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";4import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";

On This Page

Installation Usage Examples Basic File Tree Settings Panel

Get PRO

Need premium blocks and templates? Upgrade to PRO and get access.