Accordion — ARC UI

Components

Accordion

content

hybrid

<arc-accordion>

Overview

Guidelines

When to use

Use short, scannable headings so users can locate the right section quickly
Keep answer content concise — link out to full docs for lengthy topics
Place the most frequently asked question first to reduce scrolling
Wrap the accordion in a max-width container for comfortable line lengths
Use Accordion for content that benefits from progressive disclosure, such as FAQs or settings

When not to use

Do not nest an Accordion inside another Accordion — it harms scannability
Do not use Accordion as a replacement for Tabs when users need to compare sections side-by-side
Do not hide critical information (e.g. pricing, legal disclaimers) inside collapsed items — it may go unseen
Do not set every item to open by default — this defeats the purpose of progressive disclosure
Do not use Accordion for a single item — use a Disclosure or collapsible card instead

Features

Smooth CSS grid-based expand/collapse animation (no JS height calc)
Single-open by default (set multiple for multi-open)
Declarative content via <arc-accordion-item> children with a question attribute
Slotted answer content supports rich HTML, not just plain text
Accessible: aria-expanded on triggers, keyboard-focusable, visible focus ring
Animated chevron rotates 180 degrees to indicate open/closed state
Respects design tokens for colors, spacing, radii, and transitions
Rounded container with subtle 1px gap separating items

Preview

ARC UI is a framework-agnostic component library built on Lit web components. It ships first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact, so you can use the same design system regardless of your framework choice.

Every component reads from a shared set of CSS custom properties defined in the ARC UI token system. Override the tokens at any scope — :root for global changes, or a wrapper element for localised theming — and all components update automatically.

Yes. Each component is published as a standalone module. Import only what you need — for example, import '@arclux/arc-ui/reactive/accordion.js' — and your bundler will tree-shake everything else away.

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-accordion>
  <arc-accordion-item question="What is ARC UI?">
    A framework-agnostic component library built with Lit web components,
    with first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact.
  </arc-accordion-item>
  <arc-accordion-item question="How do I theme components?">
    Override the CSS custom-property tokens at any scope and every
    component updates automatically.
  </arc-accordion-item>
  <arc-accordion-item question="Can I tree-shake unused components?">
    Yes — import only the modules you need and your bundler will
    eliminate everything else.
  </arc-accordion-item>
</arc-accordion>

import { Accordion, AccordionItem } from '@arclux/arc-ui-react';

export default function FAQ() {
  return (
    <Accordion>
      <AccordionItem question="What is ARC UI?">
        A framework-agnostic component library built with Lit web components,
        with first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact.
      </AccordionItem>
      <AccordionItem question="How do I theme components?">
        Override the CSS custom-property tokens at any scope and every
        component updates automatically.
      </AccordionItem>
      <AccordionItem question="Can I tree-shake unused components?">
        Yes — import only the modules you need and your bundler will
        eliminate everything else.
      </AccordionItem>
    </Accordion>
  );
}

<script setup>
import { Accordion, AccordionItem } from '@arclux/arc-ui-vue';
</script>

<template>
  <Accordion>
    <AccordionItem question="What is ARC UI?">
      A framework-agnostic component library built with Lit web components,
      with first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact.
    </AccordionItem>
    <AccordionItem question="How do I theme components?">
      Override the CSS custom-property tokens at any scope and every
      component updates automatically.
    </AccordionItem>
    <AccordionItem question="Can I tree-shake unused components?">
      Yes — import only the modules you need and your bundler will
      eliminate everything else.
    </AccordionItem>
  </Accordion>
</template>

<script>
  import { Accordion, AccordionItem } from '@arclux/arc-ui-svelte';
</script>

<Accordion>
  <AccordionItem question="What is ARC UI?">
    A framework-agnostic component library built with Lit web components,
    with first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact.
  </AccordionItem>
  <AccordionItem question="How do I theme components?">
    Override the CSS custom-property tokens at any scope and every
    component updates automatically.
  </AccordionItem>
  <AccordionItem question="Can I tree-shake unused components?">
    Yes — import only the modules you need and your bundler will
    eliminate everything else.
  </AccordionItem>
</Accordion>

import { Component } from '@angular/core';
import { Accordion, AccordionItem } from '@arclux/arc-ui-angular';

@Component({
  imports: [Accordion, AccordionItem],
  template: `
    <arc-accordion>
      <arc-accordion-item question="What is ARC UI?">
        A framework-agnostic component library built with Lit web components,
        with first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact.
      </arc-accordion-item>
      <arc-accordion-item question="How do I theme components?">
        Override the CSS custom-property tokens at any scope and every
        component updates automatically.
      </arc-accordion-item>
      <arc-accordion-item question="Can I tree-shake unused components?">
        Yes — import only the modules you need and your bundler will
        eliminate everything else.
      </arc-accordion-item>
    </arc-accordion>
  `,
})
export class FaqComponent {}

import { Accordion, AccordionItem } from '@arclux/arc-ui-solid';

export default function FAQ() {
  return (
    <Accordion>
      <AccordionItem question="What is ARC UI?">
        A framework-agnostic component library built with Lit web components,
        with first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact.
      </AccordionItem>
      <AccordionItem question="How do I theme components?">
        Override the CSS custom-property tokens at any scope and every
        component updates automatically.
      </AccordionItem>
      <AccordionItem question="Can I tree-shake unused components?">
        Yes — import only the modules you need and your bundler will
        eliminate everything else.
      </AccordionItem>
    </Accordion>
  );
}

import { Accordion, AccordionItem } from '@arclux/arc-ui-preact';

export default function FAQ() {
  return (
    <Accordion>
      <AccordionItem question="What is ARC UI?">
        A framework-agnostic component library built with Lit web components,
        with first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact.
      </AccordionItem>
      <AccordionItem question="How do I theme components?">
        Override the CSS custom-property tokens at any scope and every
        component updates automatically.
      </AccordionItem>
      <AccordionItem question="Can I tree-shake unused components?">
        Yes — import only the modules you need and your bundler will
        eliminate everything else.
      </AccordionItem>
    </Accordion>
  );
}

<arc-accordion>
  <arc-accordion-item question="What is ARC UI?">
    A framework-agnostic component library built with Lit web components,
    with first-class wrappers for React, Vue, Svelte, Angular, Solid, and Preact.
  </arc-accordion-item>
  <arc-accordion-item question="How do I theme components?">
    Override the CSS custom-property tokens at any scope and every
    component updates automatically.
  </arc-accordion-item>
  <arc-accordion-item question="Can I tree-shake unused components?">
    Yes — import only the modules you need and your bundler will
    eliminate everything else.
  </arc-accordion-item>
</arc-accordion>

<!-- arc-accordion is hybrid — CSS handles layout, JS handles expand/collapse -->
<arc-accordion>
  <arc-accordion-item question="What is ARC UI?">
    A framework-agnostic component library.
  </arc-accordion-item>
  <arc-accordion-item question="How do I theme components?">
    Override the CSS custom-property tokens.
  </arc-accordion-item>
</arc-accordion>

API

Prop	Type	Default	Description
`multiple`	`boolean`	`false`	When true, allows multiple accordion panels to be open simultaneously. When false (default), opening one panel closes any other open panel.

AccordionItem

<arc-accordion-item>

An individual collapsible section inside an Accordion. The question attribute supplies the clickable header text, and slotted children become the expandable body content.

Prop	Type	Default	Description
`question`	`string`	—	The heading text displayed on the trigger button. Should be a concise, scannable label or question.