amezquita design systemGet started

Patterns

Accordion

Collapsible content sections with animated expand/collapse; supports single or multi-open modes

Markdown version for agents

Import
import { Accordion } from '@amezquita/design-system/components/patterns/Accordion'

Live render

    Props

    PropTypeDescription
    type'single' | 'multiple'
    defaultValue?string | string[]
    value?string | string[]
    onValueChange?(value: string) => void | (value: string[]) => void
    collapsible?boolean
    childrenReact.ReactNode
    className?string
    style?React.CSSProperties

    Tokens

    TokenTypeValue
    --accordion-content-padding-bottomdimension24px
    --accordion-content-padding-xdimension24px
    --accordion-duration-collapseduration200ms
    --accordion-duration-expandduration650ms

    Usage example

    tsx
    <Accordion type="single" collapsible style={{ maxWidth: '560px' }}>
  <AccordionItem value="item1">
    <AccordionTrigger>What is a design system?</AccordionTrigger>
    <AccordionContent>
      A design system is a collection of reusable components, guided by clear standards,
      that can be assembled to build any number of applications.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="item2">
    <AccordionTrigger>How do tokens work?</AccordionTrigger>
    <AccordionContent>
      Design tokens are the smallest named units of a design system — colors, spacing, typography.
      They are defined once and referenced everywhere, so a single change propagates consistently.
    </AccordionContent>
  </AccordionItem>

  <AccordionItem value="item3">
    <AccordionTrigger>When should I use Radix UI?</AccordionTrigger>
    <AccordionContent>
      Use Radix UI for components that require complex accessibility behaviour: keyboard navigation,
      focus management, aria attributes, and WCAG-compliant interactions. Strip all default styles
      and apply BEM classes yourself.
    </AccordionContent>
  </AccordionItem>
</Accordion>

    Sub-components

    Imported from the same path as Accordion.