AccordionWithDisabled() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ AccordionWithDisabled() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/accordion-example.tsx lines 290–336

function AccordionWithDisabled() {
  const items = [
    {
      value: "item-1",
      trigger: "Can I access my account history?",
      content:
        "Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.",
      disabled: false,
    },
    {
      value: "item-2",
      trigger: "Premium feature information",
      content:
        "This section contains information about premium features. Upgrade your plan to access this content.",
      disabled: true,
    },
    {
      value: "item-3",
      trigger: "How do I update my email address?",
      content:
        "You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.",
      disabled: false,
    },
  ]

  return (
    <Example title="With Disabled">
      <Accordion className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border">
        {items.map((item) => (
          <AccordionItem
            key={item.value}
            value={item.value}
            disabled={item.disabled}
            className="data-open:bg-muted/50 p-1"
          >
            <AccordionTrigger className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
              {item.trigger}
            </AccordionTrigger>
            <AccordionContent className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
              {item.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </Example>
  )
}