Components

Accordion

A vertically stacked set of interactive headings that reveal related content panels with native button semantics, ARIA state, and neo-brutalist borders.

4Parts
A11yARIA-ready
∞Items
Source ↗Open Docs

Preview

Usage

Import
import {
  NbAccordion,
  NbAccordionContent,
  NbAccordionItem,
  NbAccordionTrigger,
} from '@ng-brutalism/ui';
Template
<nb-accordion class="block w-full max-w-xl" collapsible>
  <nb-accordion-item>
    <nb-accordion-trigger>Lorem, ipsum dolor.</nb-accordion-trigger>
    <nb-accordion-content>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </nb-accordion-content>
  </nb-accordion-item>

  <nb-accordion-item>
    <nb-accordion-trigger>Lorem ipsum dolor sit amet consectetur.</nb-accordion-trigger>
    <nb-accordion-content>
      Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </nb-accordion-content>
  </nb-accordion-item>
</nb-accordion>

Multiple

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Controlled

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Disabled Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Customization

Override these CSS variables on :root, a wrapper, or the component element. More local values win, so per-instance styling can sit directly on the element.

Token Default Used for
--nb-accordion-item-bg var(--nb-surface) Accordion item background
--nb-accordion-item-fg var(--nb-surface-foreground) Accordion item text color
--nb-accordion-item-border var(--nb-border) Accordion item border and trigger focus color
--nb-accordion-item-radius var(--nb-radius) Accordion item corner radius
--nb-accordion-item-shadow var(--nb-shadow-offset-x) var(--nb-shadow-offset-y) 0 var(--nb-shadow) Accordion item box shadow
--nb-accordion-trigger-bg var(--nb-main) Accordion trigger background
--nb-accordion-trigger-fg var(--nb-main-foreground) Accordion trigger text and icon color
--nb-accordion-content-bg var(--nb-surface) Accordion content background
--nb-accordion-content-fg var(--nb-surface-foreground) Accordion content text color
--nb-border #000000 Border color and focus ring color
--nb-shadow #000000 Offset shadow color
--nb-radius 0rem Corner radius through the rounded-nb utility
--nb-shadow-offset-x 4px Horizontal shadow and press offset
--nb-shadow-offset-y 4px Vertical shadow and press offset
--nb-foreground #000000 Default foreground text color
--nb-background #ffffff Default surface background color

API

Accordion

Input Type Default
type 'single' | 'multiple' 'single'
collapsible boolean false
value string | string[] | null null

Accordion Item

Input Type Default
value string generated
disabled boolean false

Selectors

Selector Description
nb-accordion-trigger Toggles its parent item open or closed. Has no inputs.
nb-accordion-content Collapsible body region for an item. Has no inputs.