Accordion

Tier 2: Light-DOM

Expandable accordion sections with single/multi collapse

Installation

$npx nnui add accordion

copy

Interactive Preview & Code

Yes! It operates strictly in the Light DOM without Shadow DOM boundaries, so assistive screen readers parse unbroken ARIA trees natively.

100% yes. Thanks to the "Mutate Attributes, Never Nodes" invariant, reconcilers in React 19, Vue 3, and Svelte 5 will never suffer hydration or DOM-node mismatch errors.

It utilizes modern CSS Grid row expansion (0fr to 1fr) for buttery-smooth 60fps opening and closing transitions without JavaScript calculation overhead.

<ui-accordion type="single" collapsible>
  <div data-part="item" data-value="item-1">
    <button type="button" data-part="trigger">
      <span>Is NNUI-KIT accessible?</span>
      <svg data-part="indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div data-part="content">
      Yes! It operates strictly in the Light DOM.
    </div>
  </div>
  <div data-part="item" data-value="item-2">
    <button type="button" data-part="trigger">
      <span>Does it work with React 19?</span>
      <svg data-part="indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div data-part="content">
      100% yes. Thanks to Light DOM architecture.
    </div>
  </div>
</ui-accordion>

import React from 'react';
import 'nnuikit/css';
import 'nnuikit/client';
import { Accordion } from 'nnuikit/react';

export default function AccordionDemo() {
  return (
    <ui-accordion type="single" collapsible>
      <div data-part="item" data-value="item-1">
        <button type="button" data-part="trigger">
          <span>Is NNUI-KIT accessible?</span>
          <svg data-part="indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
        </button>
        <div data-part="content">
          Yes! It operates strictly in the Light DOM.
        </div>
      </div>
    </ui-accordion>
  );
}

<script setup>
import 'nnuikit/css';
import 'nnuikit/client';
</script>

<template>
  <ui-accordion type="single" collapsible>
    <div data-part="item" data-value="item-1">
      <button type="button" data-part="trigger">
        <span>Is NNUI-KIT accessible?</span>
        <svg data-part="indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
      </button>
      <div data-part="content">
        Yes! It operates strictly in the Light DOM.
      </div>
    </div>
  </ui-accordion>
</template>

<script>
  import 'nnuikit/css';
  import 'nnuikit/client';
</script>

<ui-accordion type="single" collapsible>
  <div data-part="item" data-value="item-1">
    <button type="button" data-part="trigger">
      <span>Is NNUI-KIT accessible?</span>
      <svg data-part="indicator" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
    </button>
    <div data-part="content">
      Yes! It operates strictly in the Light DOM.
    </div>
  </div>
</ui-accordion>

How to Utilize

NNUI-KIT components live directly in the document Light DOM. You can use them via declarative HTML, with our first-class React wrapper, or platform-natively in Svelte, Vue, Astro, and HTMX:

React 18 & 19 (Next.js 15 App Router)

import 'nnui-kit/css';
import 'nnui-kit/client';
import { Accordion } from 'nnui-kit/react';

Universal Web Components (Vue 3, Svelte 5, Astro, HTMX)

<!-- Automatically registers <ui-accordion> and <nnui-accordion> -->
import 'nnui-kit/css';
import 'nnui-kit/client';

Platform Features

Zero Shadow DOM

Element lives in the Light DOM. Tailwind and global CSS apply directly.

persist="url | local"

Add declarative persistence attribute to auto-sync state with URL search params.

sync="cross-tab"

Synchronize changes across all open browser tabs via BroadcastChannel.