Skip to content
aq-ui
Back to ComponentsComponent

Accordion

Open-code aq-ui accessible component family for Accordion.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add accordion

API reference

SSR-safe

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

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

<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It follows the WAI-ARIA accordion pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Accordion

constSource L7

Open-code aq-ui accessible component family for Accordion.

const Accordion = React.forwardRef<React.ComponentRef<typeof AccordionPrimitive.Root>, AccordionPrimitive.Root.Props>(…)
Props type
AccordionPrimitive.Root.Props
<Accordion />

AccordionContent

constSource L67

Content export for composing Accordion.

const AccordionContent = React.forwardRef<React.ComponentRef<typeof AccordionPrimitive.Panel>, AccordionPrimitive.Panel.Props>(…)
Props type
AccordionPrimitive.Panel.Props
<AccordionContent />

AccordionItem

constSource L22

Item export for composing Accordion.

const AccordionItem = React.forwardRef<React.ComponentRef<typeof AccordionPrimitive.Item>, AccordionPrimitive.Item.Props>(…)
Props type
AccordionPrimitive.Item.Props
<AccordionItem />

AccordionTrigger

constSource L37

Trigger export for composing Accordion.

const AccordionTrigger = React.forwardRef<React.ComponentRef<typeof AccordionPrimitive.Trigger>, AccordionPrimitive.Trigger.Props>(…)
Props type
AccordionPrimitive.Trigger.Props
<AccordionTrigger />

Registry dependencies

utils

Package dependencies

@base-ui/react@^1.7.0, lucide-react@^1.31.0

Files

  • components/ui/accordion.tsx

Source