AccordionBasic() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ AccordionBasic() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/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 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>
  )
}