Components

Collapsible

A component that reveals and hides content.

example.tsx

@peduarte starred 3 repositories

Import

tsx

import {
  AppCollapsible,
  AppCollapsibleTrigger,
  AppCollapsibleContent,
} from "@/components/primitives/AppCollapsible"

API Reference

AppCollapsible extends all native <div> HTML attributes.

Prop	Type	Default	Description
open	boolean	—	The controlled open state of the collapsible.
onOpenChange	(open: boolean) => void	—	Callback fired when the open state changes.
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Examples

Controlled

Use open and onOpenChange to fully control the open state from outside the component.

example.tsx

@peduarte starred 3 repositories

@radix-ui/primitives

Expand via the toggle button above

Uncontrolled (defaultOpen)

Use defaultOpen to start expanded without managing state yourself.

example.tsx

Release notes

v1.2.0 — Added dark mode support and improved accessibility.

v1.1.0 — New token system and updated sidebar layout.

Disabled

The disabled prop prevents user interaction with the trigger.

example.tsx

Restricted section

The trigger is non-interactive when disabled is set.

Nested

Collapsibles can be nested to any depth. Each maintains its own independent open state. This is the foundation of the Location Tree Filter block.

example.tsx

Asia Pacific

Philippines

Singapore

Japan

Source

src/components/primitives/AppCollapsible.tsx

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "../ui/collapsible"

const AppCollapsible = Collapsible
const AppCollapsibleTrigger = CollapsibleTrigger
const AppCollapsibleContent = CollapsibleContent

export { AppCollapsible, AppCollapsibleTrigger, AppCollapsibleContent }