## Overview [#overview] The **Collapsible** component provides an interactive way to show and hide content with smooth CSS transitions. Built on Base UI primitives, it supports both controlled and uncontrolled states, making it perfect for creating expandable sections, details panels, and progressive disclosure interfaces. ## Usage [#usage] ```tsx import { Collapsible, CollapsiblePanel, CollapsibleTrigger, } from "@tilt-legal/cubitt-components/collapsible"; ``` ```tsx Your collapsible content goes here ``` ## Examples [#examples] ### Card with Collapsible [#card-with-collapsible] Combine collapsible with cards to create expandable information panels. ```tsx "use client"; import { cn } from "@tilt-legal/cubitt-components/utilities"; import { Badge } from "@tilt-legal/cubitt-components/badge"; import { Button } from "@tilt-legal/cubitt-components/button"; import { Card, CardContent, CardHeader, CardHeading, CardToolbar, } from "@tilt-legal/cubitt-components/card"; import { Collapsible, CollapsiblePanel, CollapsibleTrigger, } from "@tilt-legal/cubitt-components/collapsible"; import { ArrowDown, ArrowUp, ChevronDown, ChevronUp, } from "@tilt-legal/cubitt-icons/ui/outline"; export default function Component() { const [isOpen, setIsOpen] = React.useState(false); interface IStatItem { label: string; value: number; change: string; changeType: "increase" | "decrease"; } const stats: IStatItem[] = [ { label: "Added to Cart", value: 3842, change: "+1.8%", changeType: "increase", }, { label: "Reached Checkout", value: 1256, change: "-1.2%", changeType: "decrease", }, { label: "Purchased", value: 649, change: "+2.4%", changeType: "increase", }, ]; return (
Conversion Rate
29.9% +4.5%
Details {isOpen ? : } } /> {stats.map((stat) => (
{stat.label}
${stat.value.toLocaleString()} {stat.changeType === "increase" ? ( ) : ( )} {stat.change}
))} ); } ``` ### Default Open [#default-open] Start the collapsible in an open state by default. ```tsx import { Button } from "@tilt-legal/cubitt-components/button"; import { Card, CardContent, CardFooter, } from "@tilt-legal/cubitt-components/card"; import { Collapsible, CollapsiblePanel, CollapsibleTrigger, } from "@tilt-legal/cubitt-components/collapsible"; export default function Component() { return (
Open by Default
This collapsible starts in the open state by default. Click the trigger below to collapse it.
Toggle } /> ); } ``` ### Disabled [#disabled] Prevent the collapsible from being toggled. ```tsx import { Button } from "@tilt-legal/cubitt-components/button"; import { Card, CardContent, CardFooter, } from "@tilt-legal/cubitt-components/card"; import { Collapsible, CollapsiblePanel, CollapsibleTrigger, } from "@tilt-legal/cubitt-components/collapsible"; export default function Component() { return (
Disabled Collapsible
This content cannot be toggled because the collapsible is disabled.
Cannot toggle } /> ); } ``` ### Nested [#nested] Create hierarchical collapsible sections by nesting multiple collapsibles. ```tsx "use client"; import { Button } from "@tilt-legal/cubitt-components/button"; import { Card, CardContent } from "@tilt-legal/cubitt-components/card"; import { Collapsible, CollapsiblePanel, CollapsibleTrigger, } from "@tilt-legal/cubitt-components/collapsible"; import { ChevronDown, ChevronUp } from "@tilt-legal/cubitt-icons/ui/outline"; export default function Component() { const [parentOpen, setParentOpen] = React.useState(false); const [child1Open, setChild1Open] = React.useState(false); const [child2Open, setChild2Open] = React.useState(false); return (
Parent Section
{parentOpen ? : } } />
Child Section 1
{child1Open ? : } } />
Nested collapsible content for section 1.
Child Section 2
{child2Open ? : } } />
Nested collapsible content for section 2.
); } ``` *** ## API Reference [#api-reference] ### Collapsible [#collapsible] The root component that manages the collapsible state. | Prop | Type | Default | Description | | -------------- | -------------------------------- | ------- | ------------------------------------------------ | | `open` | `boolean` | - | The controlled open state of the collapsible. | | `defaultOpen` | `boolean` | `false` | The default open state when uncontrolled. | | `onOpenChange` | `(open: boolean) => void` | - | Callback fired when the open state changes. | | `disabled` | `boolean` | `false` | Whether the collapsible is disabled. | | `className` | `string` | - | Additional CSS classes for the collapsible root. | | `render` | `React.ReactElement \| function` | - | Allows replacing the component's HTML element. | ### CollapsiblePanel [#collapsiblepanel] The panel component that contains the collapsible content with animated height transitions. | Prop | Type | Default | Description | | ----------- | -------------------------------- | ------- | ---------------------------------------------- | | `className` | `string` | - | Additional CSS classes for the panel. | | `render` | `React.ReactElement \| function` | - | Allows replacing the component's HTML element. | The panel includes built-in CSS transitions for smooth expand/collapse animations with automatic height calculation. ### CollapsibleTrigger [#collapsibletrigger] The trigger component that toggles the collapsible state when clicked. | Prop | Type | Default | Description | | ----------- | -------------------------------- | ------- | -------------------------------------------------------------------------------------------------- | | `render` | `React.ReactElement \| function` | - | Allows replacing the component's HTML element. Use this to render as a custom element like Button. | | `className` | `string` | - | Additional CSS classes for the trigger. | When using the `render` prop, the trigger will forward all collapsible state to the rendered element.