Accordion

Expandable panels for progressive disclosure of content.

Default (single open)

What is Lui?

Lui (Lightweight User Interface) is a cross-framework UI library.

How do I install it?

Runnpm install luiand import the CSS.

Is it accessible?

Yes — all components follow ARIA guidelines and keyboard navigation.

tsx
<Accordion>
  <AccordionItem title="What is Lui?">
    <p>Lui (Lightweight User Interface) is a cross-framework UI library.</p>
  </AccordionItem>
  <AccordionItem title="How do I install it?">
    <p>
      Run
      <code>npm install lui</code>
      and import the CSS.
    </p>
  </AccordionItem>
  <AccordionItem title="Is it accessible?">
    <p>Yes — all components follow ARIA guidelines and keyboard navigation.</p>
  </AccordionItem>
</Accordion>

With open item

What is Lui?

Lui (Lightweight User Interface) is a cross-framework UI library.

How do I install it?

Runnpm install luiand import the CSS.

Is it accessible?

Yes — all components follow ARIA guidelines and keyboard navigation.

tsx
<Accordion>
  <AccordionItem title="What is Lui?">
    <p>Lui (Lightweight User Interface) is a cross-framework UI library.</p>
  </AccordionItem>
  <AccordionItem title="How do I install it?" expanded>
    <p>
      Run
      <code>npm install lui</code>
      and import the CSS.
    </p>
  </AccordionItem>
  <AccordionItem title="Is it accessible?">
    <p>Yes — all components follow ARIA guidelines and keyboard navigation.</p>
  </AccordionItem>
</Accordion>

Multiple open mode

What is Lui?

Lui (Lightweight User Interface) is a cross-framework UI library.

How do I install it?

Runnpm install luiand import the CSS.

Is it accessible?

Yes — all components follow ARIA guidelines and keyboard navigation.

tsx
<Accordion multiple>
  <AccordionItem title="What is Lui?" expanded>
    <p>Lui (Lightweight User Interface) is a cross-framework UI library.</p>
  </AccordionItem>
  <AccordionItem title="How do I install it?" expanded>
    <p>
      Run
      <code>npm install lui</code>
      and import the CSS.
    </p>
  </AccordionItem>
  <AccordionItem title="Is it accessible?">
    <p>Yes — all components follow ARIA guidelines and keyboard navigation.</p>
  </AccordionItem>
</Accordion>