---
title: Accordion
description: >-
  A component with multiple configuration options for collapsing and expanding
  content.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/accordion'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/accordion.md'
---

# Accordion

A component with multiple configuration options for collapsing and expanding content. For full props documentation, see [Radix Accordion](https://www.radix-ui.com/primitives/docs/components/accordion).

Examples

## Preview

![accordion](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Accordion-CO-d2J-l.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
  } from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
          <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
          <AccordionContent>
            Yes, you can open multiple items at the same time with the multiple
            type.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Is it customizable?</AccordionTrigger>
          <AccordionContent>
            Yes, you can customize the styling and behavior to match your needs.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    )
  }
  ```

* ####

  ##### Description

  A basic collapsible accordion with single item open

  ##### tsx

  ```tsx
  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
  } from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
          <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
          <AccordionContent>
            Yes, you can open multiple items at the same time with the multiple
            type.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Is it customizable?</AccordionTrigger>
          <AccordionContent>
            Yes, you can customize the styling and behavior to match your needs.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    )
  }
  ```

* ####

  ##### Description

  An accordion allowing multiple items to be open simultaneously

  ##### tsx

  ```tsx
  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
  } from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Accordion type="multiple">
        <AccordionItem value="item-1">
          <AccordionTrigger>Can I open multiple items?</AccordionTrigger>
          <AccordionContent>
            Yes, you can open multiple items at the same time with the multiple
            type.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Is it customizable?</AccordionTrigger>
          <AccordionContent>
            Yes, you can customize the styling and behavior to match your needs.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    )
  }
  ```

* ####

  ##### Description

  An accordion that cannot be collapsed once opened

  ##### tsx

  ```tsx
  import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
  } from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Accordion type="single" collapsible={false}>
        <AccordionItem value="item-1">
          <AccordionTrigger>Can I collapse this?</AccordionTrigger>
          <AccordionContent>
            No. When you set the collapsible prop to false, the accordion is not collapsible.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    )
  }
  ```

***