Skip to main content

​
Overview

What is A’raf DS?

A’raf DS is a design system built for modern web applications, providing consistent tokens, components, and patterns.

How do I install it?
Is dark mode supported?
Accordion organizes content into collapsible sections, reducing cognitive load by hiding detail until needed. It supports single (only one open at a time) and multiple (many can be open) expansion modes.

​
Installation

npm install @araf-ds/core

​
Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@araf-ds/core"

export default function Example() {
  return (
    <Accordion type="single" collapsible defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>What is A'raf DS?</AccordionTrigger>
        <AccordionContent>
          A'raf DS is a design system built for modern web applications.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>How do I install it?</AccordionTrigger>
        <AccordionContent>
          Install via npm: <code>npm install @araf-ds/core</code>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

​
Variants

​
Single Mode (Default)

Only one item can be open at a time. Use collapsible to allow closing the active item.
What is A’raf DS?

A’raf DS is a design system built for modern web applications.

How do I install it?
Is dark mode supported?
<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>What is A'raf DS?</AccordionTrigger>
    <AccordionContent>A'raf DS is a design system built for modern web applications.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>How do I install it?</AccordionTrigger>
    <AccordionContent>Install via npm: <code>npm install @araf-ds/core</code></AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-3">
    <AccordionTrigger>Is dark mode supported?</AccordionTrigger>
    <AccordionContent>Yes, all components adapt automatically via semantic tokens.</AccordionContent>
  </AccordionItem>
</Accordion>

​
Multiple Mode

Multiple items can be open simultaneously. 
<Accordion type="multiple" defaultValue={["item-1", "item-2"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Section 1</AccordionTrigger>
    <AccordionContent>Content 1</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Section 2</AccordionTrigger>
    <AccordionContent>Content 2</AccordionContent>
  </AccordionItem>
</Accordion>

​
API Reference

​
Accordion

​
type
string
default:"single"
Expansion mode. Values: single · multiple
​
value
string | string[]
Controlled open item(s). String for single, string array for multiple.
​
onValueChange
(value) => void
Callback fired when the open state changes.
​
defaultValue
string | string[]
Uncontrolled default open item(s).
​
collapsible
boolean
default:"false"
When true, allows closing the active item in single mode by clicking it again.
​
className
string
Additional Tailwind classes for custom overrides.

​
AccordionItem

​
value
string
Unique identifier for this item (required).
​
disabled
boolean
default:"false"
Disables this item — it cannot be opened or closed.

​
Accessibility

  • Accordion follows the WAI-ARIA Accordion pattern with role="button" on triggers
  • Triggers toggle aria-expanded between true and false
  • Content panels use role="region" and aria-labelledby pointing to their trigger
  • Enter/Space opens or closes the focused item
  • Up/Down arrow keys move focus between triggers

​
Do’s & Don’ts

Do

  • Use Accordion for FAQ sections, settings groups, and structured reference content
  • Use type="single" for step-by-step guides where one step is active
  • Use type="multiple" for reference content users may want to compare
  • Keep trigger labels short — one clear phrase per item

Don't

  • Don’t use Accordion to hide critical information users always need
  • Don’t nest accordions inside accordion content — it creates confusion
  • Don’t use Accordion as a replacement for Tabs
  • Don’t put primary CTAs inside accordion panels — they are easily missed