Accordion
Expandable content sections with animated height. Good for FAQs, settings panels, and any UI that uses progressive disclosure.
<arc-accordion>Overview
Accordion organizes related content into collapsible sections, so users can focus on one topic at a time without leaving the page. Each section header is a toggle that reveals or hides its body with a CSS grid animation, so no JavaScript height calculation is needed.
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.
Trigger buttons carry aria-expanded state, keyboard navigation uses standard focus management, and the chevron rotates to show the 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, and 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, where it may go unseen
- Do not set every item to open by default; that defeats progressive disclosure
- Do not use Accordion for a single item. Use a Disclosure or collapsible card instead
Features
- CSS grid expand/collapse animation (no JS height calculation)
- Single-open by default (set multiple for multi-open)
- Declarative content via `<arc-accordion-item>` children with a question attribute
- Slotted answer content can be any HTML
- 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
multiplebooleanfalse- 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
questionstring''- The heading text displayed on the trigger button. Should be a concise, scannable label or question.