Collapsible

Toggle content visibility with smooth animation and accessible controls.

Preview

@drivn/ui has 3 packages

@drivn/components

@drivn/cli

@drivn/mcp

Installation

npx drivn add collapsible

Usage

1 import { Collapsible } from "@/components/ui/collapsible"
2 import { ChevronsUpDown } from "lucide-react"
3 
4 export default function Page() {
5   return (
6     <Collapsible className="space-y-2">
7       <div className="flex items-center justify-between">
8         <h4 className="text-sm font-semibold">
9           3 items
10         </h4>
11         <Collapsible.Trigger>
12           <ChevronsUpDown className="w-4 h-4" />
13         </Collapsible.Trigger>
14       </div>
15       <div className="rounded-md border px-4 py-2.5 text-sm">
16         Always visible item
17       </div>
18       <Collapsible.Content className="space-y-2">
19         <div className="rounded-md border px-4 py-2.5 text-sm">
20           Hidden item 1
21         </div>
22         <div className="rounded-md border px-4 py-2.5 text-sm">
23           Hidden item 2
24         </div>
25       </Collapsible.Content>
26     </Collapsible>
27   )
28 }

Default Open

Start with content visible using the defaultOpen prop.

@drivn/ui has 3 packages

@drivn/components

@drivn/cli

@drivn/mcp

Controlled

Drive open state with external useState.

3 pinned dependencies

react@19.1.0

next@16.1.6

typescript@5.8.3

File Tree

Nested collapsibles composing a file explorer.

page.tsx

layout.tsx

page.tsx

layout.tsx

globals.css

button.tsx

collapsible.tsx

dialog.tsx

header.tsx

footer.tsx

utils.ts

cn.ts

favicon.ico

og-image.png

next.config.ts

package.json

tsconfig.json

Settings

Collapsible settings sections with icons.

Manage your notification preferences and choose which alerts you want to receive.

Control your privacy settings and manage how your data is shared.

Customize the look and feel, including theme, font size, and layout density.

API Reference

Collapsible

Prop	Type	Default	Description
`defaultOpen`	boolean	false	Initial open state for uncontrolled mode.
`open`	boolean	—	Controlled open state. Use with onOpenChange.
`onOpenChange`	(open: boolean) => void	—	Callback fired when the open state changes.
`className`	string	—	Additional CSS classes for the root element.
`children`	ReactNode	—	Trigger and Content sub-components.

Collapsible.Trigger

Prop	Type	Default	Description
`children`	ReactNode	—	Trigger label content.
`className`	string	—	Additional CSS classes to apply.
`...props`	ButtonHTMLAttributes<HTMLButtonElement>	—	All standard HTML button attributes are supported.

Collapsible.Content

Prop	Type	Default	Description
`children`	ReactNode	—	Collapsible content.
`className`	string	—	Additional CSS classes to apply.

1	import { Collapsible } from "@/components/ui/collapsible"
2	import { ChevronsUpDown } from "lucide-react"
3
4	export default function Page() {
5	return (
6	<Collapsible className="space-y-2">
7	<div className="flex items-center justify-between">
8	<h4 className="text-sm font-semibold">
9	3 items
10	</h4>
11	<Collapsible.Trigger>
12	<ChevronsUpDown className="w-4 h-4" />
13	</Collapsible.Trigger>
14	</div>
15	<div className="rounded-md border px-4 py-2.5 text-sm">
16	Always visible item
17	</div>
18	<Collapsible.Content className="space-y-2">
19	<div className="rounded-md border px-4 py-2.5 text-sm">
20	Hidden item 1
21	</div>
22	<div className="rounded-md border px-4 py-2.5 text-sm">
23	Hidden item 2
24	</div>
25	</Collapsible.Content>
26	</Collapsible>
27	)
28	}