AccordionTrigger() — ui Function Reference

Architecture documentation for the AccordionTrigger() function in accordion.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ AccordionTrigger() — ui Function Reference

Dependency Diagram

graph TD
  0010f172_f26c_84cc_4689_0c0e3fa4a1b2["AccordionTrigger()"]
  3ab95c9c_64f9_0723_b040_080c9df68a2a["accordion.tsx"]
  0010f172_f26c_84cc_4689_0c0e3fa4a1b2 -->|defined in| 3ab95c9c_64f9_0723_b040_080c9df68a2a
  style 0010f172_f26c_84cc_4689_0c0e3fa4a1b2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/new-york-v4/ui/accordion.tsx lines 28–48

function AccordionTrigger({
  className,
  children,
  ...props
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
  return (
    <AccordionPrimitive.Header className="flex">
      <AccordionPrimitive.Trigger
        data-slot="accordion-trigger"
        className={cn(
          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
          className
        )}
        {...props}
      >
        {children}
        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
      </AccordionPrimitive.Trigger>
    </AccordionPrimitive.Header>
  )
}