CollapsibleBasic() — ui Function Reference

Architecture documentation for the CollapsibleBasic() function in collapsible-basic.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ CollapsibleBasic() — ui Function Reference

Dependency Diagram

graph TD
  31b68750_7b97_54cc_d1fe_7247f8c08a94["CollapsibleBasic()"]
  cb4ae259_ca9f_cc11_f870_c98269219d36["collapsible-basic.tsx"]
  31b68750_7b97_54cc_d1fe_7247f8c08a94 -->|defined in| cb4ae259_ca9f_cc11_f870_c98269219d36
  style 31b68750_7b97_54cc_d1fe_7247f8c08a94 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/collapsible-basic.tsx lines 11–33

export function CollapsibleBasic() {
  return (
    <Card className="mx-auto w-full max-w-sm">
      <CardContent>
        <Collapsible className="data-[state=open]:bg-muted rounded-md">
          <CollapsibleTrigger asChild>
            <Button variant="ghost" className="group w-full">
              Product details
              <ChevronDownIcon className="ml-auto group-data-[state=open]:rotate-180" />
            </Button>
          </CollapsibleTrigger>
          <CollapsibleContent className="flex flex-col items-start gap-2 p-2.5 pt-0 text-sm">
            <div>
              This panel can be expanded or collapsed to reveal additional
              content.
            </div>
            <Button size="xs">Learn More</Button>
          </CollapsibleContent>
        </Collapsible>
      </CardContent>
    </Card>
  )
}