Accordion

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

Default

Only one panel is open at a time. Setting collapsible allows the open panel to be closed again.

Hummingbird UI is a class-based design system. Components ship their looks as semantic CSS classes and use Radix UI primitives for behavior.

tsx

import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionContent,
} from "@hummingbirdui/react";

export default function AccordionDefault() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="item-1"
      className="mx-auto max-w-2xl"
    >
      <AccordionItem value="item-1">
        <AccordionHeader>
          <AccordionTrigger>What is Hummingbird UI?</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Hummingbird UI is a class-based design system. Components ship their
          looks as semantic CSS classes and use Radix UI primitives for
          behavior.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionHeader>
          <AccordionTrigger>Is it accessible?</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Yes. The Accordion is built on Radix UI&apos;s headless primitive, so
          keyboard navigation and ARIA wiring are handled for you.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionHeader>
          <AccordionTrigger>Can multiple panels stay open?</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Use <code>type=&quot;multiple&quot;</code> to let several items expand
          at once, or <code>type=&quot;single&quot;</code> with{" "}
          <code>collapsible</code> to allow closing the open item.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Multiple

Use type="multiple" to let any number of panels stay open at once.

tsx

import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionContent,
} from "@hummingbirdui/react";

export default function AccordionMultiple() {
  return (
    <Accordion type="multiple" className="mx-auto max-w-2xl">
      <AccordionItem value="item-1">
        <AccordionHeader>
          <AccordionTrigger>What is Hummingbird UI?</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Hummingbird UI is a class-based design system. Components ship their
          looks as semantic CSS classes and use Radix UI primitives for
          behavior.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionHeader>
          <AccordionTrigger>Is it accessible?</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Yes. The Accordion is built on Radix UI&apos;s headless primitive, so
          keyboard navigation and ARIA wiring are handled for you.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionHeader>
          <AccordionTrigger>Can multiple panels stay open?</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Yes. With <code>type=&quot;multiple&quot;</code> every panel toggles
          independently, so any number of them can be open at the same time.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Disabled

Add disabled to an AccordionItem to prevent it from opening, or to the Accordion root to disable every item.

Hummingbird UI is a class-based design system. Components ship their looks as semantic CSS classes and use Radix UI primitives for behavior.

tsx

import {
  Accordion,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionContent,
} from "@hummingbirdui/react";

export default function AccordionDisabled() {
  return (
    <Accordion
      type="single"
      collapsible
      defaultValue="item-1"
      className="mx-auto max-w-2xl"
    >
      <AccordionItem value="item-1">
        <AccordionHeader>
          <AccordionTrigger>What is Hummingbird UI?</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          Hummingbird UI is a class-based design system. Components ship their
          looks as semantic CSS classes and use Radix UI primitives for
          behavior.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" disabled>
        <AccordionHeader>
          <AccordionTrigger>This item is disabled</AccordionTrigger>
        </AccordionHeader>
        <AccordionContent>
          You won&apos;t be able to open this panel.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

API Reference

For detailed usage guidelines, see the Radix UI documentation.

Styling

Hummingbird React accordion is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available accordion classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousForm RangeNextAlert