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
  edc50037_f583_400f_d119_f10096da9fa2["CollapsibleBasic()"]
  88e30cda_1cf5_7e75_4b26_5de7c1a09e4d["collapsible-basic.tsx"]
  edc50037_f583_400f_d119_f10096da9fa2 -->|defined in| 88e30cda_1cf5_7e75_4b26_5de7c1a09e4d
  style edc50037_f583_400f_d119_f10096da9fa2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

export function CollapsibleBasic() {
  return (
    <Card className="mx-auto w-full max-w-sm">
      <CardContent>
        <Collapsible className="data-open:bg-muted rounded-md">
          <CollapsibleTrigger
            render={<Button variant="ghost" className="w-full" />}
          >
            Product details
            <ChevronDownIcon className="ml-auto group-data-panel-open/button:rotate-180" />
          </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>
  )
}