║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

export const metadata = { title: 'Accordion - Motion-Primitives', description: 'A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections. Built for React, Next.js, and Tailwind CSS.', };

import { AccordionBasic } from './accordion-basic'; import { AccordionIcons } from './accordion-icons'; import { AccordionVariant } from './accordion-variant'; import ComponentCodePreview from '@/components/website/component-code-preview';

Accordion

A vertically stacked set of collapsible containers allowing users to toggle content visibility. Customize the animation effects with variants and transitions for expanding/collapsing the sections.

Examples

Accordion Basic

<ComponentCodePreview classNameComponentContainer='min-h-0 py-24 lg:px-32 px-8' component={<AccordionBasic />} filePath='app/docs/accordion/accordion-basic.tsx' />

Accordion with icons

You can control transformations on elements inside AccordionTrigger using group-data-[expanded]:..... Here, we apply -rotate-180 to rotate the icon 180 degrees when its associated section is expanded.

<ComponentCodePreview classNameComponentContainer='min-h-0 py-24 lg:px-32 px-8' component={<AccordionIcons />} filePath='app/docs/accordion/accordion-icons.tsx' />

Accordion custom variants

<ComponentCodePreview classNameComponentContainer='min-h-0 py-24 lg:px-32 px-8' component={<AccordionVariant />} filePath='app/docs/accordion/accordion-variant.tsx' />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value='cli'>CLI</TabsTrigger> <TabsTrigger value='manual'>Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <InstallationCli value='accordion' /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<CodeBlock filePath='components/core/accordion.tsx' />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Component API

Accordion

| Prop | Type | Default | Description | | :------------ | :------------------------------------------ | :------ | :------------------------------------------------------ | | children | ReactNode | | The content elements of the accordion. | | className | string | | Optional CSS class for styling the accordion container. | | transition | Transition | | Transition settings from motion for animation effects. | | variants | { expanded: Variant; collapsed: Variant } | | Custom variants for expanded and collapsed states. | | expandedValue | React.Key | null | | Controlled expanded value. | | onValueChange | (value: React.Key | null) => void | | Callback function when the expanded value changes. |

AccordionItem

| Prop | Type | Default | Description | | :-------- | :-------- | :------ | :----------------------------------------------------------- | | value | React.Key | | Unique identifier for controlling the accordion item state. | | children | ReactNode | | The content elements of the accordion item. | | className | string | | Optional CSS class for styling the accordion item container. |

AccordionTrigger

| Prop | Type | Default | Description | | :-------- | :-------- | :------ | :------------------------------------------------------------ | | children | ReactNode | | Content of the trigger, typically a string or formatted text. | | className | string | | Optional CSS class for styling the trigger element. |

AccordionContent

| Prop | Type | Default | Description | | :-------- | :-------- | :------ | :--------------------------------------------------------- | | children | ReactNode | | The content displayed when the accordion item is expanded. | | className | string | | Optional CSS class for styling the content container. |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║