Accordion

Bundle size WAI-ARIA

An accordion is a vertically stacked set of interactive headings that each contain a title, content snippet, or thumbnail representing a section of content.

Multiple Open

Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem clita et.

Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem clita et. Eirmod dolore ipsum vero accusam elitr sea stet, aliquyam dolore clita no takimata. Magna dolor invidunt lorem lorem ut invidunt et.


  import React from 'react'
  import {
    Accordion,
    AccordionItem,
    AccordionHeader,
    AccordionPanel
  } from '@lora-ui/accordion'
  import { ChevronDown } from 'lucide-react'

  function AccordionDemo() {
    return (
      <Accordion
        className="mx-auto rounded-xl max-w-[400px] overflow-hidden shadow-[0px_4px_8px_-2px_rgba(16,24,40,0.1),0px_2px_4px_-2px_rgba(16,24,40,0.06)] border border-box bg-[#ffffff] dark:bg-[#0c111d] border-[#eaecf0] dark:border-[#1f242f]"
        defaultIndexes={[0, 1]}
        mode="multiple"
      >
        <AccordionItem>
          <AccordionHeader
            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
            level={2}
          >
            <span>some heading</span>
            <ChevronDown size={16} />
          </AccordionHeader>
          <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
            <div className="p-4">
              Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem
              clita et.
            </div>
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionHeader
            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
            level={2}
          >
            <span>some heading</span>
            <ChevronDown size={16} />
          </AccordionHeader>
          <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
            <div className="p-4">
              Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem
              clita et. Eirmod dolore ipsum vero accusam elitr sea stet, aliquyam dolore clita
              no takimata. Magna dolor invidunt lorem lorem ut invidunt et.
            </div>
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionHeader
            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
            level={2}
          >
            <span>some heading</span>
            <ChevronDown size={16} />
          </AccordionHeader>
          <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
            <div className="p-4">
              Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem
              clita et. Eirmod dolore ipsum vero accusam elitr sea stet, aliquyam dolore clita
              no takimata. Magna dolor invidunt lorem lorem ut invidunt et.
            </div>
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    )
  }

  export default AccordionDemo

Single Open


  import React from 'react'
  import {
    Accordion,
    AccordionItem,
    AccordionHeader,
    AccordionPanel
  } from '@lora-ui/accordion'
  import { ChevronDown } from 'lucide-react'

  function AccordionDemo() {
    return (
       <Accordion
        className="mx-auto rounded-xl max-w-[400px] overflow-hidden shadow-[0px_4px_8px_-2px_rgba(16,24,40,0.1),0px_2px_4px_-2px_rgba(16,24,40,0.06)] border border-box bg-[#ffffff] dark:bg-[#0c111d] border-[#eaecf0] dark:border-[#1f242f]"
        defaultIndex={0}
        mode="single"
      >
        <AccordionItem>
          <AccordionHeader
            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
            level={2}
          >
            <span>some heading</span>
            <ChevronDown size={16} />
          </AccordionHeader>
          <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
            <div className="p-4">
              Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem
              clita et. Eirmod dolore ipsum vero accusam elitr sea stet, aliquyam dolore clita
              no takimata. Magna dolor invidunt lorem lorem ut invidunt et.
            </div>
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionHeader
            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
            level={2}
          >
            <span>some heading</span>
            <ChevronDown size={16} />
          </AccordionHeader>
          <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
            <div className="p-4">
              Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem
              clita et. Eirmod dolore ipsum vero accusam elitr sea stet, aliquyam dolore clita
              no takimata. Magna dolor invidunt lorem lorem ut invidunt et.
            </div>
          </AccordionPanel>
        </AccordionItem>
        <AccordionItem isDisabled>
          <AccordionHeader
            className="w-full font-semibold text-sm [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center aria-[disabled=true]:bg-[#f2f4f7] dark:aria-[disabled=true]:bg-[#1f242f] aria-[disabled=true]:text-[#667085] dark:aria-[disabled=true]:text-[#85888e] focus:z-10 focus:aria-[disabled=true]:shadow-none aria-[disabled=true]:cursor-not-allowed"
            level={2}
          >
            <span>some heading</span>
            <ChevronDown size={16} />
          </AccordionHeader>
          <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0 aria-[disable=true]:bg-[#f2f4f7] dark:aria-[disabled=true]:bg-[#1f242f] aria-[disabled=true]:text-[#667085] dark:aria-[disabled=true]:text-[#85888e] focus:z-10 focus:aria-[disabled=true]:shadow-none aria-[disabled=true]:cursor-not-allowed">
            <div className="p-4">
              Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem
              clita et. Eirmod dolore ipsum vero accusam elitr sea stet, aliquyam dolore clita
              no takimata. Magna dolor invidunt lorem lorem ut invidunt et.
            </div>
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    )
  }

  export default AccordionDemo

Nested

Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem clita et.


  import React from 'react'
  import {
    Accordion,
    AccordionItem,
    AccordionHeader,
    AccordionPanel
  } from '@lora-ui/accordion'
  import { ChevronDown } from 'lucide-react'

  function AccordionDemo() {
    return (
      <Accordion
        className="mx-auto rounded-xl max-w-[400px] overflow-hidden shadow-[0px_4px_8px_-2px_rgba(16,24,40,0.1),0px_2px_4px_-2px_rgba(16,24,40,0.06)] border border-box bg-[#ffffff] dark:bg-[#0c111d] border-[#eaecf0] dark:border-[#1f242f]"
        defaultIndexes={[0]}
        mode="multiple"
      >
        <AccordionItem>
          <AccordionHeader
            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
            level={2}
          >
            <span>some heading</span>
            <ChevronDown size={16} />
          </AccordionHeader>
          <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
            <div className="p-4">
              <Accordion
                className="rounded-xl border border-box bg-[#ffffff] dark:bg-[#0c111d] border-[#eaecf0] dark:border-[#1f242f]"
                defaultIndexes={[0, 1]}
                mode="multiple"
              >
                <AccordionItem>
                  <AccordionHeader
                    className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
                    level={2}
                  >
                    <span>some heading</span>
                    <ChevronDown size={16} />
                  </AccordionHeader>
                  <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
                    <div className="p-4">
                      Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore
                      lorem clita et.
                    </div>
                  </AccordionPanel>
                </AccordionItem>
                <AccordionItem>
                  <AccordionHeader
                    className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
                    level={2}
                  >
                    <span>some heading</span>
                    <ChevronDown size={16} />
                  </AccordionHeader>
                  <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
                    <div className="p-4">
                      Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore
                      lorem clita et. Eirmod dolore ipsum vero accusam elitr sea stet,
                      aliquyam dolore clita no takimata. Magna dolor invidunt lorem lorem ut
                      invidunt et.
                    </div>
                  </AccordionPanel>
                </AccordionItem>
                <AccordionItem>
                  <AccordionHeader
                    className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
                    level={2}
                  >
                    <span>some heading</span>
                    <ChevronDown size={16} />
                  </AccordionHeader>
                  <AccordionPanel className="text-[#344054] dark:text-[#cecfd2] text-sm font-normal aria-[hidden=true]:invisible overflow-hidden aria-[hidden=true]:h-0">
                    <div className="p-4">
                      Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore
                      lorem clita et. Eirmod dolore ipsum vero accusam elitr sea stet,
                      aliquyam dolore clita no takimata. Magna dolor invidunt lorem lorem ut
                      invidunt et.
                    </div>
                  </AccordionPanel>
                </AccordionItem>
              </Accordion>
            </div>
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    )
  }

  export default AccordionDemo

Animiation

Example use Framer Motion to trigger smooth collapse effects

Sit diam sit et ea consetetur diam eirmod et sanctus. Eos dolore labore lorem clita et.


  import React from 'react'
  import {
    Accordion,
    AccordionItem,
    AccordionHeader,
    AccordionPanel
  } from '@lora-ui/accordion'
  import { ChevronDown } from 'lucide-react'
  import { motion, AnimatePresence } from 'framer-motion'

  function AccordionDemo() {
    return (
       <Accordion
        className="mx-auto rounded-xl max-w-[400px] overflow-hidden shadow-[0px_4px_8px_-2px_rgba(16,24,40,0.1),0px_2px_4px_-2px_rgba(16,24,40,0.06)] border border-box bg-[#ffffff] dark:bg-[#0c111d] border-[#eaecf0] dark:border-[#1f242f]"
        defaultIndexes={[0]}
        mode="multiple"
      >
        <AccordionItem>
          <AccordionHeader
            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
            level={2}
          >
            <span>some heading</span>
            <ChevronDown size={16} />
          </AccordionHeader>
          <AccordionPanel className="font-normal text-[#475467] text-sm overflow-hidden">
            {({ isOpen }) => {
              return (
                <AnimatePresence initial={false}>
                  <motion.section
                    animate={isOpen ? 'open' : 'collapsed'}
                    variants={{
                      open: { height: 'auto' },
                      collapsed: { height: 0 },
                    }}
                    transition={{ duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] }}
                  >
                    <div className="p-4">
                      <Accordion
                        className="rounded-xl border border-box bg-[#ffffff] dark:bg-[#0c111d] border-[#eaecf0] dark:border-[#1f242f]"
                        defaultIndexes={[0, 1]}
                        mode="multiple"
                      >
                        <AccordionItem>
                          <AccordionHeader
                            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
                            level={2}
                          >
                            <span>some heading</span>
                            <ChevronDown size={16} />
                          </AccordionHeader>
                          <AccordionPanel className="font-normal text-[#475467] dark:text-[#cecfd2] text-sm overflow-hidden">
                            {({ isOpen }) => {
                              return (
                                <AnimatePresence initial={false}>
                                  <motion.section
                                    animate={isOpen ? 'open' : 'collapsed'}
                                    variants={{
                                      open: { height: 'auto' },
                                      collapsed: { height: 0 },
                                    }}
                                    transition={{
                                      duration: 0.3,
                                      ease: [0.04, 0.62, 0.23, 0.98],
                                    }}
                                  >
                                    <div className="p-4">
                                      Sit diam sit et ea consetetur diam eirmod et sanctus.
                                      Eos dolore labore lorem clita et.
                                    </div>
                                  </motion.section>
                                </AnimatePresence>
                              )
                            }}
                          </AccordionPanel>
                        </AccordionItem>
                        <AccordionItem>
                          <AccordionHeader
                            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
                            level={2}
                          >
                            <span>some heading</span>
                            <ChevronDown size={16} />
                          </AccordionHeader>
                          <AccordionPanel className="font-normal text-[#475467] dark:text-[#cecfd2] text-sm overflow-hidden">
                            {({ isOpen }) => {
                              return (
                                <AnimatePresence initial={false}>
                                  <motion.section
                                    animate={isOpen ? 'open' : 'collapsed'}
                                    variants={{
                                      open: { height: 'auto' },
                                      collapsed: { height: 0 },
                                    }}
                                    transition={{
                                      duration: 0.3,
                                      ease: [0.04, 0.62, 0.23, 0.98],
                                    }}
                                  >
                                    <div className="p-4">
                                      Sit diam sit et ea consetetur diam eirmod et sanctus.
                                      Eos dolore labore lorem clita et.
                                    </div>
                                  </motion.section>
                                </AnimatePresence>
                              )
                            }}
                          </AccordionPanel>
                        </AccordionItem>
                        <AccordionItem>
                          <AccordionHeader
                            className="w-full text-sm font-semibold text-[#101828] dark:text-[#f5f5f6] [&_svg]:aria-[expanded=true]:rotate-180 flex justify-between p-4 items-center focus-visible:ring-[rgba(158,119,237,0.24)] focus-visible:ring-4 focus-visible:ring-inset focus:outline-none"
                            level={2}
                          >
                            <span>some heading</span>
                            <ChevronDown size={16} />
                          </AccordionHeader>
                          <AccordionPanel className="font-normal text-[#475467] dark:text-[#cecfd2] text-sm overflow-hidden">
                            {({ isOpen }) => {
                              return (
                                <AnimatePresence initial={false}>
                                  <motion.section
                                    animate={isOpen ? 'open' : 'collapsed'}
                                    variants={{
                                      open: { height: 'auto' },
                                      collapsed: { height: 0 },
                                    }}
                                    transition={{
                                      duration: 0.3,
                                      ease: [0.04, 0.62, 0.23, 0.98],
                                    }}
                                  >
                                    <div className="p-4">
                                      Sit diam sit et ea consetetur diam eirmod et sanctus.
                                      Eos dolore labore lorem clita et.
                                    </div>
                                  </motion.section>
                                </AnimatePresence>
                              )
                            }}
                          </AccordionPanel>
                        </AccordionItem>
                      </Accordion>
                    </div>
                  </motion.section>
                </AnimatePresence>
              )
            }}
          </AccordionPanel>
        </AccordionItem>
      </Accordion>
    )
  }

  export default AccordionDemo

Installation

Install the component from your command line.

npm install @lora-ui/accordion

API Reference

Accordion

Prop	Type	Default	Explanation
defaultIndex	Number	-1	initial active index
defaultIndexes	Number[]	[]	initial active indexes
mode	String	single	__

Accordion Item

Prop	Type	Default	Explanation
isDisabled	Boolean	false	initial state

Accordion Header

Prop	Type	Default	Explanation
__	__	__	__

Accordion Panel

Prop	Type	Default	Explanation
__	__	__	__

Accessibility

Keyboard

Command	Description
Space or Enter	When focus is on the accordion header for a collapsed panel, expands the associated panel. If the implementation allows only one panel to be expanded, and if another panel is expanded, collapses that panel. When focus is on the accordion header for an expanded panel, collapses the panel if the implementation supports collapsing. Some implementations require one panel to be expanded at all times and allow only one panel to be expanded; so, they do not support a collapse function.
ArrowDown	If focus is on an accordion header, moves focus to the next accordion header. If focus is on the last accordion header, either does nothing or moves focus to the first accordion header.
ArrowUp	If focus is on an accordion header, moves focus to the previous accordion header. If focus is on the first accordion header, either does nothing or moves focus to the last accordion header.
Home	When focus is on an accordion header, moves focus to the first accordion header.
End	When focus is on an accordion header, moves focus to the last accordion header.
Tab	Move focus to the next focusable element
Shift+Tab	Move focus to the previous focusable element

Other

All relevant ARIA attributes are automatically managed.