maker-ui/accordion 3.77 kb


The Accordion is a client component used to display a list of items that can be expanded or collapsed. You can use supply the Accordion with an external activeKey to control which item is expanded, and you can also rely on its own internal expand / collapse state.


Install the maker-ui library with your package manager of choice, and add the accordion styles to your app's layout file or any particular page layout:

npm install maker-ui
// app/layout.tsx
import 'maker-ui/accordion.css'


When implemented with the use client directive, you can access the Accordion as a compound component. This offers a more declarative API and enhances readability:

'use client'
import { Accordion } from 'maker-ui/accordion'
export const Faqs = () => (
    <Accordion.Panel title="Panel 1">Content area 1</Accordion.Panel>
    <Accordion.Panel title="Panel 2">Content area 2</Accordion.Panel>
    <Accordion.Panel title="Panel 3">Content area 3</Accordion.Panel>

For server-side JSX, you should use direct imports for compatibility. Replace Accordion.Panel with the direct import of AccordionPanel:

import { Accordion, AccordionPanel } from 'maker-ui/accordion'
export const Faqs = () => (
    <AccordionPanel title="Panel 1">Content area 1</AccordionPanel>
    <AccordionPanel title="Panel 2">Content area 2</AccordionPanel>
    <AccordionPanel title="Panel 3">Content area 3</AccordionPanel>



The Accordion wrapper acts as a context provider that stores shared settings for all Accordion panels. It extends HTMLDivElement props and also includes:

iconbooleanIf true, the Accordion button will render an icon that shows expand/collapse status.

Default: true
| { expand: ReactElement, collapse: ReactElement }
| (isExpanded: boolean) => ReactNode
An optional icon, set of icons, or a callback / render function that can be used to supply a custom accordion toggle icon.
activeClassstringA custom class name to apply to the accordion button when it is active.

Default: 'expanded'
activeKeynumber | stringThe currently active accordion panel key if controlled by an external or parent component.

Make sure the key exists as an eventKey prop on a nested <Accordion.Panel>.
showSinglebooleanIf true, the accordion will only display one open panel at a time.

Default: false
animateboolean | stringIf true or if you supply a CSS transition attribute (string), the accordion will add a CSS transition to animate the accordion panel's height.

Please note that animating height will force a repaint and may affect your app's performance.

Default: false
stylesAccordionStylesCustom styles for all accordion HTML elements.

See Theme Variables below.
classNamesAccordionClassesCustom class selectors for all accordion HTML elements.

See Class Selectors below.
childrenReactElement[] | ReactNodeNested AccordionPanel children.


Extends all native div element props and also includes:

titlestring | ReactElementA title string or custom React component slot that is rendered immediately inside the panel's toggle button.
onClick() => voidA custom callback function that is invoked when the user clicks the accordion button.
openbooleanIf true, the panel will be open by default.

Default: false
eventKeystringA unique key that can toggle the panel open and close from an external component.


Maker UI components are very flexible when it comes to styling. You can use CSS variables, class selectors, or inline styles to customize the look and feel of your Accordion.

If you are building a consistent design system for your app, consider the Theme Variables approach and declare all colors as CSS variables in a global or shared stylesheet. Remember to account for multiple color modes if applicable (ie. dark, light, etc.).

Theme Variables#

You can set the Accordion component's CSS variables by supplying an object to the styles prop (locally scoped), or you can set them directly in your stylesheet.

CSS VariableStyles PropDescription
--accordion-btn-colorbutton.colorButton color
--accordion-btn-bgbutton.bgButton background
--accordion-btn-borderbutton.borderButton border
--accordion-btn-paddingbutton.paddingButton padding
--accordion-btn-font-sizebutton.fontSizeButton font size
--accordion-btn-font-familybutton.fontFamilyButton font family
--accordion-btn-color-activebutton.colorActiveButton color when active
--accordion-btn-bg-activebutton.bgActiveButton background when active
--accordion-btn-border-activebutton.borderActiveButton border when active
--accordion-icon-fillicon.fillIcon fill color
--accordion-icon-fill-activeicon.fillActiveIcon fill color when active
--accordion-icon-heighticon.heightIcon height
--accordion-panel-bgpanel.bgPanel background
--accordion-panel-paddingpanel.paddingPanel padding
--accordion-panel-font-sizepanel.fontSizePanel font size

Class Selectors#

By default, the Accordion component generates mkui class selectors for all of its nested HTML elements. You can add your own selectors by passing an object with any of the following keys to the Accordion's classNames prop.

groupRoot Accordion component container
panelAccordion panel outer wrapper. This class handles the collapsing functionality.
panelContentAccordion panel inner wrapper. This wraps your Accordion.Panel child content.
panelGroupThe outermost wrapper for the Accordion.Panel component. This wraps the panel and button.
buttonThe Accordion.Panel button element.


Animated accordion with custom styles
  animate="height ease-in-out 0.2s"
    button: {
      color: 'var(--color-primary)',
      colorActive: 'var(--color-secondary)',
      background: 'var(--color-gray-100)',
      border: '1px solid var(--color-border-200)',
  <Accordion.Panel title="Button #1">Panel text</Accordion.Panel>
  <Accordion.Panel title="Button #2">Panel text</Accordion.Panel>
  <Accordion.Panel title="Button #3">Panel text</Accordion.Panel>