Collapsible

Open-code aq-ui accessible component family for Collapsible.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

3 environment variables

Values are encrypted at rest.

Loading interactive preview…

pnpm dlx aq-ui@alpha add collapsible

Client module

Import the parts you need, then jump to an export for its contract.

"use client"

import { Collapsible } from "@/components/ui/collapsible"

<Collapsible />

Open-code aq-ui accessible component family for Collapsible.

const Collapsible = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Root>, CollapsiblePrimitive.Root.Props>(…)

Content export for composing Collapsible.

const CollapsibleContent = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Panel>, CollapsiblePrimitive.Panel.Props>(…)

Trigger export for composing Collapsible.

const CollapsibleTrigger = React.forwardRef<React.ComponentRef<typeof CollapsiblePrimitive.Trigger>, CollapsiblePrimitive.Trigger.Props>(…)

@base-ui/react@^1.7.0