Accordion

Collapsible content panels for organizing information.

PreviousCard

NextTabs

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Accordion

Collapsible content panels for organizing information.

Accordions

A vertically stacked set of collapsible panels for organizing content.

When to use

FAQ sectionsDisplaying answers to complex or specific product questions without cluttering the main layout

compact forms / sidebar settingsGrouping complex sets of advanced configurations (e.g. SMTP config, SMTP logs)

Interactive Playground

Live CanvasInteractive

Controls(9)

type

select

Whether one or multiple items can be expanded

collapsible

boolean

Toggle state:

Allows all items to be closed (only for type='single')

variant

select

Visual style variant of the accordion

itemVariant

select

Visual style variant of the accordion items

iconType

select

Icon type used in the trigger

title1

text

Title of the first item

content1

text

Content of the first item

title2

text

Title of the second item

content2

text

Content of the second item

Generated JSX

Source

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "nexoreui"

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic.</AccordionContent>
  </AccordionItem>
</Accordion>

Default Accordion

component.tsx

Multiple Accordion

component.tsx

Glass Accordion

component.tsx

Outline Accordion

component.tsx

Neon Accordion

component.tsx

Page 1 of 2

API Reference (Props)

Prop	Type	Default	Description
type*	"single" \| "multiple"	`—`	Whether one or multiple items can be expanded at the same time.
collapsible	boolean	`false`	When type is 'single', allows expanding items to be collapsed.
variant	"default" \| "glass" \| "outline" \| "neon"	`"default"`	Visual style variant of the accordion.
defaultValue	string \| string[]	`—`	Value of the item(s) to expand by default.
value	string \| string[]	`—`	Controlled value of expanded item(s).
disabled	boolean	`false`	Prevents items from being toggled.

Accessibility (a11y)

Keyboard Controls: Supports standard keyboard controls. Pressing Enter or Space on a focused heading triggers expand/collapse.
ARIA attributes: Uses Radix UI Accordion wrapper, connecting triggers via aria-controls and mapping state via aria-expanded.

PreviousCard

NextTabs

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

Accordions

A vertically stacked set of collapsible panels for organizing content.

When to use

FAQ sectionsDisplaying answers to complex or specific product questions without cluttering the main layout

compact forms / sidebar settingsGrouping complex sets of advanced configurations (e.g. SMTP config, SMTP logs)

Interactive Playground

Live CanvasInteractive

Controls(9)

type

select

Whether one or multiple items can be expanded

collapsible

boolean

Toggle state:

Allows all items to be closed (only for type='single')

variant

select

Visual style variant of the accordion

itemVariant

select

Visual style variant of the accordion items

iconType

select

Icon type used in the trigger

title1

text

Title of the first item

content1

text

Content of the first item

title2

text

Title of the second item

content2

text

Content of the second item

Generated JSX

Source

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "nexoreui"

<Accordion type="single" collapsible className="w-full">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>Yes. It comes with default styles that match the other components' aesthetic.</AccordionContent>
  </AccordionItem>
</Accordion>

Default Accordion

component.tsx

Multiple Accordion

component.tsx

Glass Accordion

component.tsx

Outline Accordion

component.tsx

Neon Accordion

component.tsx

Page 1 of 2

API Reference (Props)

Prop	Type	Default	Description
type*	"single" \| "multiple"	`—`	Whether one or multiple items can be expanded at the same time.
collapsible	boolean	`false`	When type is 'single', allows expanding items to be collapsed.
variant	"default" \| "glass" \| "outline" \| "neon"	`"default"`	Visual style variant of the accordion.
defaultValue	string \| string[]	`—`	Value of the item(s) to expand by default.
value	string \| string[]	`—`	Controlled value of expanded item(s).
disabled	boolean	`false`	Prevents items from being toggled.

Accessibility (a11y)

Keyboard Controls: Supports standard keyboard controls. Pressing Enter or Space on a focused heading triggers expand/collapse.
ARIA attributes: Uses Radix UI Accordion wrapper, connecting triggers via aria-controls and mapping state via aria-expanded.

Accordion

Accordion

Accordions

When to use

Interactive Playground

Is it accessible?

Is it styled?

Default Accordion

Is it accessible?

Multiple Accordion

Item 1

Item 2

Glass Accordion

Glass Style

Premium Look

Outline Accordion

Outline Border

Neon Accordion

Premium Features

API Reference (Props)

Accessibility (a11y)

Accordions

When to use

Interactive Playground

Is it accessible?

Is it styled?

Default Accordion

Is it accessible?

Multiple Accordion

Item 1

Item 2

Glass Accordion

Glass Style

Premium Look

Outline Accordion

Outline Border

Neon Accordion

Premium Features

API Reference (Props)

Accessibility (a11y)