Accordion

Display collapsible content panels for organizing information into expandable sections.

Import


import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@raydenui/ui";

Usage

Basic

Rayden UI is a React component library built with Tailwind CSS.

Install with npm, yarn, or pnpm: npm install @raydenui/ui


<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>What is Rayden UI?</AccordionTrigger>
    <AccordionContent>
      Rayden UI is a React component library built with Tailwind CSS.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I install it?</AccordionTrigger>
    <AccordionContent>
      Install with npm, yarn, or pnpm: npm install @raydenui/ui
    </AccordionContent>
  </AccordionItem>
</Accordion>

Nested Type

The nested type has full borders with rounded corners instead of bottom borders.

Content for section one.

Content for section two.


<Accordion type="nested">
  <AccordionItem value="item-1">
    <AccordionTrigger>Section One</AccordionTrigger>
    <AccordionContent>Content for section one.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section Two</AccordionTrigger>
    <AccordionContent>Content for section two.</AccordionContent>
  </AccordionItem>
</Accordion>

Multiple Open

Allow multiple items to be open simultaneously.

This can stay open…

…while this is also open.


<Accordion multiple>
  <AccordionItem value="item-1">
    <AccordionTrigger>First Item</AccordionTrigger>
    <AccordionContent>This can stay open...</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Second Item</AccordionTrigger>
    <AccordionContent>...while this is also open.</AccordionContent>
  </AccordionItem>
</Accordion>

With Icons

Configure your preferences here.

Manage team members and permissions.


<Accordion>
  <AccordionItem value="settings">
    <AccordionTrigger leadingIcon="settings">Settings</AccordionTrigger>
    <AccordionContent>Configure your preferences here.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="users">
    <AccordionTrigger leadingIcon="users">Users</AccordionTrigger>
    <AccordionContent>Manage team members and permissions.</AccordionContent>
  </AccordionItem>
</Accordion>

With Numbers

Begin with installation.

Set up your project.


<Accordion>
  <AccordionItem value="step-1">
    <AccordionTrigger leadingNumber="01">Getting Started</AccordionTrigger>
    <AccordionContent>Begin with installation.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="step-2">
    <AccordionTrigger leadingNumber="02">Configuration</AccordionTrigger>
    <AccordionContent>Set up your project.</AccordionContent>
  </AccordionItem>
</Accordion>

Controlled


const [openItems, setOpenItems] = useState<string[]>(["item-1"]);
 
<Accordion value={openItems} onValueChange={setOpenItems}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Controlled Item</AccordionTrigger>
    <AccordionContent>This is controlled externally.</AccordionContent>
  </AccordionItem>
</Accordion>

Props

Accordion

Prop	Type	Default	Description
`type`	`"default" \| "nested"`	`"default"`	Visual type: border-bottom or full border
`multiple`	`boolean`	`false`	Allow multiple items open simultaneously
`value`	`string[]`	—	Controlled open item keys
`defaultValue`	`string[]`	`[]`	Default open items (uncontrolled)
`onValueChange`	`(value: string[]) => void`	—	Callback when open items change
`className`	`string`	—	Additional CSS classes

AccordionItem

Prop	Type	Default	Description
`value`	`string`	—	Unique key for this item (required)
`disabled`	`boolean`	`false`	Whether this item is disabled
`className`	`string`	—	Additional CSS classes

AccordionTrigger

Prop	Type	Default	Description
`leadingIcon`	`ReactNode \| IconName`	—	Leading icon on left side
`leadingNumber`	`string`	—	Number badge (styled dark badge)
`leadingLogo`	`ReactNode`	—	Logo element
`badge`	`number \| string`	—	Counter badge with light orange background
`hideChevron`	`boolean`	`false`	Hide the chevron indicator
`className`	`string`	—	Additional CSS classes

AccordionContent

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes

Accessibility

Uses aria-expanded and aria-controls for screen readers
Keyboard accessible with Enter/Space to toggle
Content region has role="region" with aria-labelledby