Accordion

Accordion

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.

Installation#

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'

Usage#

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>
    <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>
  </Accordion>
)

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 = () => (
  <Accordion>
    <AccordionPanel title="Panel 1">Content area 1</AccordionPanel>
    <AccordionPanel title="Panel 2">Content area 2</AccordionPanel>
    <AccordionPanel title="Panel 3">Content area 3</AccordionPanel>
  </Accordion>
)

Props#

Accordion#

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

Accordion.Panel#

Extends all native div element props and also includes:

Styling#

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.

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.