Overview

A series of interactive titles stacked on top of each other, each one revealing a section of content.

Preview

Is it accessible?

Is it unstyled?

Can it be animated?

Code

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@inpulse-ui/accordion';

export function Demo() {
  return (
    <Accordion>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it unstyled?</AccordionTrigger>
        <AccordionContent>
          Yes. It's unstyled by default, giving you freedom over the look and feel.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Can it be animated?</AccordionTrigger>
        <AccordionContent>
          Yes! You can use the transition prop to configure the animation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

About

This component is a slight expansion of the Accordion developed and maintained by Radix UI.

Installation

pnpm

pnpm add @inpulse-ui/accordion

bun

bun add @inpulse-ui/accordion

yarn

yarn add @inpulse-ui/accordion

npm

npm install @inpulse-ui/accordion

API Reference

Root

Contains all the parts of an accordion.

Prop	Type	Default Value	Required
type	enum	singlemultiple	No
value	string	-	No
defaultValue	string	-	No
onValueChange	function	-	No
collapsible	boolean	false	No
disabled	boolean	false	No
dir	enum	ltrrtr	No
orientation	enum	horizontalvertical	No

Item

Contains all the parts of a collapsible section.

Prop	Type	Default Value	Required
disabled	boolean	false	No
value	string	-	Yes

Trigger

Toggles the collapsed state of its associated item.

Prop	Type	Default Value	Required
asChild	boolean	false	No
useUnderline	boolean	true	No

Content

Contains the collapsible content for an item.

Prop	Type	Default Value	Required
asChild	boolean	false	No
forceMount	boolean	-	No

Usage

Wrap all accordion items with the Accordion component. Each item should be wrapped in an AccordionItem, which contains a AccordionTrigger and a AccordionContent.

<Accordion>
  <AccordionItem value="item">
    <AccordionTrigger>Item title</AccordionTrigger>
    <AccordionContent>
      Item content.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Allow to close items

Use the collapsible prop to allow all items to be collapsed.

Preview

Is it accessible?

Is it unstyled?

Can it be animated?

Code

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@inpulse-ui/accordion';

export function Demo() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it unstyled?</AccordionTrigger>
        <AccordionContent>
          Yes. It's unstyled by default, giving you freedom over the look and feel.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Can it be animated?</AccordionTrigger>
        <AccordionContent>
          Yes! You can use the transition prop to configure the animation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Multiple items open at once

Set the type property to multiple to allow opening multiple items at the same time.

Preview

Is it accessible?

Is it unstyled?

Can it be animated?

Code

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@inpulse-ui/accordion';

export function Demo() {
  return (
    <Accordion type="multiple">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it unstyled?</AccordionTrigger>
        <AccordionContent>
          Yes. It's unstyled by default, giving you freedom over the look and feel.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Can it be animated?</AccordionTrigger>
        <AccordionContent>
          Yes! You can use the transition prop to configure the animation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Expanded by default

Use the defaultValue property to define which items should be expanded by default.

Preview

Is it accessible?

Is it unstyled?

Yes. It's unstyled by default, giving you freedom over the look and feel.

Can it be animated?

Code

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@inpulse-ui/accordion';

export function Demo() {
  return (
    <Accordion type="single" defaultValue="item-2">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it unstyled?</AccordionTrigger>
        <AccordionContent>
          Yes. It's unstyled by default, giving you freedom over the look and feel.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger>Can it be animated?</AccordionTrigger>
        <AccordionContent>
          Yes! You can use the transition prop to configure the animation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Ignore the underline

Through the useUnderline prop, it is possible to remove the underline from the trigger.

Preview

Is it accessible?

Is it unstyled?

Can it be animated?

Code

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@inpulse-ui/accordion';

export function Demo() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger useUnderline={false}>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger useUnderline={false}>Is it unstyled?</AccordionTrigger>
        <AccordionContent>
          Yes. It's unstyled by default, giving you freedom over the look and feel.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger useUnderline={false}>Can it be animated?</AccordionTrigger>
        <AccordionContent>
          Yes! You can use the transition prop to configure the animation.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}