Accordion

Collapsible accordion sections. Use for FAQs or grouped content. Based on Radix UI Accordion.

Installation

npm install @nqlib/nqui

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@nqlib/nqui';

Basic Usage

Copy this into your app — same pattern as the first example below.

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from '@nqlib/nqui';

export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>Yes. It comes with default styles that match the other components.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="3">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>Yes. It's animated by default, and you can customize it.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Examples

Each example has a Preview and Code tab. The code is copy-paste ready for your app (import from '@nqlib/nqui', same usage as above).

Single (one open at a time)

type='single' collapsible — opening one closes the other. One item open max.

example.tsx

import {  Accordion,  AccordionItem,  AccordionTrigger,  AccordionContent,} from '@nqlib/nqui';export default function Example() {  return (    <Accordion type="single" collapsible>      <AccordionItem value="1">        <AccordionTrigger>Is it accessible?</AccordionTrigger>        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>      </AccordionItem>      <AccordionItem value="2">        <AccordionTrigger>Is it styled?</AccordionTrigger>        <AccordionContent>Yes. It comes with default styles that match the other components.</AccordionContent>      </AccordionItem>      <AccordionItem value="3">        <AccordionTrigger>Is it animated?</AccordionTrigger>        <AccordionContent>Yes. It's animated by default, and you can customize it.</AccordionContent>      </AccordionItem>    </Accordion>  );}

Multiple (independent)

type='multiple' — each item opens and closes independently. No limit.

example.tsx

import {  Accordion,  AccordionItem,  AccordionTrigger,  AccordionContent,} from '@nqlib/nqui';export default function Example() {  return (    <Accordion type="multiple">      <AccordionItem value="1">        <AccordionTrigger>Is it accessible?</AccordionTrigger>        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>      </AccordionItem>      <AccordionItem value="2">        <AccordionTrigger>Is it styled?</AccordionTrigger>        <AccordionContent>Yes. It comes with default styles that match the other components.</AccordionContent>      </AccordionItem>      <AccordionItem value="3">        <AccordionTrigger>Is it animated?</AccordionTrigger>        <AccordionContent>Yes. It's animated by default, and you can customize it.</AccordionContent>      </AccordionItem>    </Accordion>  );}

Props

Accordion

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	-	Single or multiple items open at once
`collapsible`	`boolean`	-	Allow closing the open item (type="single" only)
`value`	`string \| string[]`	-	Controlled value(s)
`defaultValue`	`string \| string[]`	-	Uncontrolled default value(s)
`onValueChange`	`(value: string \| string[]) => void`	-	Callback when value changes
`disabled`	`boolean`	`false`	Disable the accordion
All standard `div` props	-	-	Accepts HTML div attributes

AccordionItem

Prop	Type	Default	Description
`value`	`string`	-	Unique value for the item
`disabled`	`boolean`	`false`	Disable this item
All standard `div` props	-	-	Accepts HTML div attributes

AccordionTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props into child
All standard `button` props	-	-	Accepts HTML button attributes

AccordionContent

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Force mount when closed
All standard `div` props	-	-	Accepts HTML div attributes

Next Steps

Collapsible for a single toggle
Tabs for tabbed content