Components

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

example.tsx

Import

tsx

import { AppAccordion, AppAccordionItem, AppAccordionTrigger, AppAccordionContent } from "@/components/primitives/AppAccordion"

Single vs multiple

Use the type prop to control whether one or multiple items can be open at a time.

Value	Behaviour
single	Only one item can be open at a time.
multiple	Multiple items can be open simultaneously.

Collapsible

When type="single", add collapsible to allow the open item to be closed by clicking its trigger again.

tsx

<AppAccordion type="single" collapsible>
  {/* items */}
</AppAccordion>

API Reference

AppAccordion and its sub-components extend their underlying Radix UI primitives.

Prop	Type	Default	Description
type	"single" \| "multiple"	—	Whether one or multiple items can be open at a time.
collapsible	boolean	false	When type="single", allows the open item to be closed.
defaultValue	string \| string[]	—	The value of the item(s) open by default.
value	string \| string[]	—	Controlled open state value.
onValueChange	(value: string \| string[]) => void	—	Callback fired when the open state changes.
className	string	—	Additional Tailwind classes merged via cn(). Prefer the wrapper pattern for reusable overrides.

Source

src/components/primitives/AppAccordion.tsx

"use client"

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"

function AppAccordion(props: React.ComponentProps<typeof Accordion>) {
  return <Accordion {...props} />
}

function AppAccordionItem(props: React.ComponentProps<typeof AccordionItem>) {
  return <AccordionItem {...props} />
}

function AppAccordionTrigger(props: React.ComponentProps<typeof AccordionTrigger>) {
  return <AccordionTrigger {...props} />
}

function AppAccordionContent(props: React.ComponentProps<typeof AccordionContent>) {
  return <AccordionContent {...props} />
}

export { AppAccordion, AppAccordionItem, AppAccordionTrigger, AppAccordionContent }