Accordion

Expandable content sections with smooth height animations. Ideal for FAQs, settings panels, and any UI that benefits from progressive disclosure.

Components

Accordion

content

hybrid

<arc-accordion>

Overview

The Accordion component organizes related content into collapsible sections, letting users focus on one topic at a time without leaving the page. Each section header acts as a toggle that smoothly reveals or hides its body content using a CSS grid animation — no JavaScript-driven height calculations required. Use Accordion when you have multiple blocks of content that are individually useful but would overwhelm the user if shown all at once. Common scenarios include FAQ pages, product feature breakdowns, configuration panels, and documentation side-notes. Because each item is a lightweight `<arc-accordion-item>` element, content is authored declaratively in markup rather than passed as a data array. The component is fully accessible out of the box: trigger buttons carry `aria-expanded` state, keyboard navigation works via standard focus management, and the chevron indicator rotates to reinforce visual state. Animations respect `prefers-reduced-motion` when set at the OS level.

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 localized 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/accordion' — 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

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.

answer: Answer content from slotted children
question string ='': The heading text displayed on the trigger button. Should be a concise, scannable label or question.

Accordion

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

AccordionItem

See Also

Docs

Project

Arclight