Accordion
A vertically stacked set of interactive headings that each reveal an associated section of content.
- Full keyboard navigation
- Can be controlled or uncontrolled
- Fully animated transitions
- Can be used as a single or multiple accordion
Installation
Run the following command
npx vibes@latest add accordionUsage
import { Accordion, AccordionItem } from '@/vibes/soul/primitives/accordion';const accordionItems = [ { title: 'What is your return policy?', content: 'Our return policy allows you to return items within 30 days of purchase for a full refund. Items must be in their original condition and packaging.', }, { title: 'How long does shipping take?', content: 'Shipping typically takes 3-5 business days for domestic orders. International shipping may take longer depending on the destination.', },];function Usage() { return ( <Accordion type="multiple"> {accordionItems.map(({ title, content }, index) => ( <AccordionItem key={index} title={title} value={index.toString()}> {content} </AccordionItem> ))} </Accordion> );}API Reference
AccordionProps
Refer to the Radix UI documentation for the Accordion.Root component.
AccordionItem
| Prop | Type | Default |
|---|---|---|
children* | ReactNode | |
className | string | |
colorScheme | 'dark' | 'light' | 'light' |
title* | string |
Refer to the Radix UI documentation for the Accordion.Item for additional properties.
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --accordion-focus: var(--primary); --acordion-light-offset: var(--background); --accordion-light-title-text: var(--contrast-400); --accordion-light-title-text-hover: var(--foreground); --accordion-light-title-icon: var(--contrast-500); --accordion-light-title-icon-hover: var(--foreground); --accordion-light-content-text: var(--foreground); --acordion-dark-offset: var(--foreground); --accordion-dark-title-text: var(--contrast-200); --accordion-dark-title-text-hover: var(--background); --accordion-dark-title-icon: var(--contrast-200); --accordion-dark-title-icon-hover: var(--background); --accordion-dark-content-text: var(--background); --accordion-title-font-family: var(--font-family-mono); --accordion-content-font-family: var(--font-family-body);}