AccordionBasic() — ui Function Reference

Architecture documentation for the AccordionBasic() function in accordion-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ AccordionBasic() — ui Function Reference

Dependency Diagram

graph TD
  9247707f_fbc6_3d80_3af3_fa20b673263b["AccordionBasic()"]
  aeea2cc4_46f4_ba87_3e70_fbf4ce4112e9["accordion-example.tsx"]
  9247707f_fbc6_3d80_3af3_fa20b673263b -->|defined in| aeea2cc4_46f4_ba87_3e70_fbf4ce4112e9
  style 9247707f_fbc6_3d80_3af3_fa20b673263b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/accordion-example.tsx lines 33–66

function AccordionBasic() {
  const items = [
    {
      value: "item-1",
      trigger: "Is it accessible?",
      content: "Yes. It adheres to the WAI-ARIA design pattern.",
    },
    {
      value: "item-2",
      trigger: "Is it styled?",
      content:
        "Yes. It comes with default styles that matches the other components' aesthetic.",
    },
    {
      value: "item-3",
      trigger: "Is it animated?",
      content:
        "Yes. It's animated by default, but you can disable it if you prefer.",
    },
  ]

  return (
    <Example title="Basic">
      <Accordion type="single" collapsible className="mx-auto max-w-lg">
        {items.map((item) => (
          <AccordionItem key={item.value} value={item.value}>
            <AccordionTrigger>{item.trigger}</AccordionTrigger>
            <AccordionContent>{item.content}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </Example>
  )
}