tezosx-ui

v1.0.0

Accordion

Accessible collapsible content component built with Radix UI

Installation

Install the accordion component using the shadcn CLI:

npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/accordion.json

Examples

Basic

Simple accordion with multiple items

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Multiple Open

Allow multiple items to be open simultaneously

<Accordion type="multiple" className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Tezos?</AccordionTrigger>
    <AccordionContent>...</AccordionContent>
  </AccordionItem>
  {/* More items... */}
</Accordion>

Controlled

Accordion with controlled state

This item is open by default using the defaultValue prop.

<Accordion type="single" defaultValue="item-1" className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Default Open</AccordionTrigger>
    <AccordionContent>...</AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

The Accordion component consists of multiple sub-components:

Accordion (Root)

Main component. Props: type ("single" | "multiple"), value, defaultValue, onValueChange, collapsible

AccordionItem

Individual accordion item. Props: value (required), className

AccordionTrigger

The clickable header that toggles the item. Includes chevron icon

AccordionContent

The collapsible content area. Animated expand/collapse

Accessibility

  • • Built on Radix UI Accordion for full accessibility support
  • • Keyboard navigation: Arrow keys to navigate, Enter/Space to toggle
  • • Screen reader support with proper ARIA attributes
  • • Focus management and keyboard shortcuts
  • • Smooth CSS animations for expand/collapse
  • • Supports both single and multiple open modes
  • • Chevron icon rotates to indicate state