Collapsible

An interactive component which expands/collapses a panel.

1import * as React from "react";2import { Button } from "@/components/ui/button";3import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";4import { ChevronsUpDown } from "lucide-react";

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/react
npm install @sprawlify/primitives @sprawlify/react
yarn add @sprawlify/primitives @sprawlify/react
bun add @sprawlify/primitives @sprawlify/react

Add the following files to your project:

collapsible.tsx

1"use client";23import { Collapsible as CollapsiblePrimitive } from "@sprawlify/react/collapsible";45function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {6  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;7}89function CollapsibleTrigger({10  ...props11}: React.ComponentProps<typeof CollapsiblePrimitive.Trigger>) {12  return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />;13}1415function CollapsibleContent({16  ...props17}: React.ComponentProps<typeof CollapsiblePrimitive.Content>) {18  return <CollapsiblePrimitive.Content data-slot="collapsible-content" {...props} />;19}2021export { Collapsible, CollapsibleTrigger, CollapsibleContent };22

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-react";

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 { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

Settings Panel

Use a trigger button to reveal additional settings.

1import * as React from "react";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.