AccordionCard() — ui Function Reference

Architecture documentation for the AccordionCard() function in accordion-card.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ AccordionCard() — ui Function Reference

Dependency Diagram

graph TD
  6c76e7c6_1df2_2b93_9116_44ab053ad34c["AccordionCard()"]
  8d194468_c86a_9a0a_83c8_2d3a93b0564d["accordion-card.tsx"]
  6c76e7c6_1df2_2b93_9116_44ab053ad34c -->|defined in| 8d194468_c86a_9a0a_83c8_2d3a93b0564d
  style 6c76e7c6_1df2_2b93_9116_44ab053ad34c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/accordion-card.tsx lines 36–58

export default function AccordionCard() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Subscription & Billing</CardTitle>
        <CardDescription>
          Common questions about your account, plans, payments and
          cancellations.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Accordion type="single" collapsible defaultValue="plans">
          {items.map((item) => (
            <AccordionItem key={item.value} value={item.value}>
              <AccordionTrigger>{item.trigger}</AccordionTrigger>
              <AccordionContent>{item.content}</AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </CardContent>
    </Card>
  )
}