Accordion

The Accordion component is a vertically stacked set of interactive headings that each reveal an associated section of content.

Basic Usage

import { Accordion, ThemeProvider } from "@carton-org/react-neumorphism";

const items = [
  {
    title: "Getting Started",
    content: "Learn how to get started with our product",
    initiallyOpen: true,
    icon: <CubeIcon />,
    iconStyle: "default",
  },
  {
    title: "Installation",
    content: "Step by step installation guide",
    icon: <CubeIcon />,
  },
  {
    title: "Configuration",
    content: "How to configure the component",
    icon: <CubeIcon />,
  },
];

<Accordion items={items} enableUniqueOpen={true} size="md" />;

Live Example

Getting Started

Learn how to get started with our product

Installation

Step by step installation guide

Configuration

How to configure the component

Accordion Props

Name	Type	Description	Required	Default Value
items	Array<AccordionItem>	Array of accordion items. Each item should have title, content, and optionally initiallyOpen, icon, and iconStyle properties	Yes	-
border	boolean	Whether to show a border around the accordion	No	false
enableUniqueOpen	boolean	If true, only one accordion item can be open at a time	No	false
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the accordion	No	"md"
accordionStyle	React.CSSProperties	Custom styles for the main accordion container	No	-
accordionItemTitleStyle	React.CSSProperties	Custom styles for the accordion item title	No	-
accordionItemContentStyle	React.CSSProperties	Custom styles for the accordion item content	No	-
accordionItemContainerStyle	React.CSSProperties	Custom styles for the accordion item container	No	-

Accordion Item Props

Name	Type	Description	Required	Default Value
icon	React.ReactNode	Icon to display next to the accordion item title	No	-
title	string	The title text of the accordion item	Yes	-
content	string	The content text to display when the accordion item is expanded	Yes	-
initiallyOpen	boolean	Whether the accordion item should be open by default	No	false
iconStyle	"inset" | "default" | "outline"	The style of the icon. Can be one of: inset, default, or outline	No	"default"

Examples

Different Sizes

Small Size

Small Accordion

This is a small sized accordion

Medium Size

Medium Accordion

This is a medium sized accordion

Large Size

Large Accordion

This is a large sized accordion

Icon Styles

Default Icon Style

Default Style

Icon with default style

Inset Icon Style

Inset Style

Icon with inset style

Outline Icon Style

Outline Style

Icon with outline style

With Border

Bordered Accordion

This accordion has a border