Accordion

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

Import

import { Accordion } from '@recastui/react';

Usage

Editable Example

<Accordion items={[{
			title: 'Customization',
			content: 'Colors, fonts, shadows and many other parts are customizable to fit your design needs',
		},
		{
			title: 'Flexibility',
			content: 'Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles',
		}
	]} />

Variants

Use the variant prop to change the visual style of the Accordion. You can set the value to ‘boxed’, ‘filled’ or ‘spaced’. It’s an optional prop.

Editable Example

<Accordion variant='boxed' items={[{
			title: 'Customization',
			content: 'Colors, fonts, shadows and many other parts are customizable to fit your design needs',
		},
		{
			title: 'Flexibility',
			content: 'Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles',
		}
	]} />

Left Icon

Use the iconLeft prop to change the position of the Accordion Chevron/Icon from right to left.

Editable Example

<Accordion iconLeft items={[{
			title: 'Customization',
			content: 'Colors, fonts, shadows and many other parts are customizable to fit your design needs',
		},
		{
			title: 'Flexibility',
			content: 'Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles',
		}
	]} />

Disable Icon Rotation

Use the disableIconRotation prop to disable the rotation of the Accordion Chevron/Icon.

Editable Example

<Accordion disableIconRotation items={[{
			title: 'Customization',
			content: 'Colors, fonts, shadows and many other parts are customizable to fit your design needs',
		},
		{
			title: 'Flexibility',
			content: 'Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles',
		}
	]} />

Transition Duration

Use the transitionDuration prop to change the duration of Accordion Panel height transition.

Editable Example

<Accordion transitionDuration={2000} items={[{
			title: 'Customization',
			content: 'Colors, fonts, shadows and many other parts are customizable to fit your design needs',
		},
		{
			title: 'Flexibility',
			content: 'Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles',
		}
	]} />

Icon Rotation Degree

Use the iconRotationClassName prop to change the rotation degree of the Icon.

Editable Example

<Accordion iconRotationClassName='-rotate-90' items={[{
			title: 'Customization',
			content: 'Colors, fonts, shadows and many other parts are customizable to fit your design needs',
		},
		{
			title: 'Flexibility',
			content: 'Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles',
		}
	]} />

Recipes

Custom Icon

Use the icon prop to change the Icon.

Editable Example

<Accordion iconRotationClassName='-rotate-45' icon={IconPlus} items={[{
			title: 'Customization',
			content: 'Colors, fonts, shadows and many other parts are customizable to fit your design needs',
		},
		{
			title: 'Flexibility',
			content: 'Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles',
		}
	]} />