Accordion

01Preview

Change the controls to try every supported combination. The preview renders the real component and the code updates with it.

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@nuton/ui'

<Accordion defaultValue="sources">
  <AccordionItem value="sources">
    <AccordionTrigger>What can I turn into a course?</AccordionTrigger>
    <AccordionContent>A topic you type, or your own PDFs, slide decks, YouTube videos, audio, web pages and notes.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="privacy">
    <AccordionTrigger>Who can see my study materials?</AccordionTrigger>
    <AccordionContent>Only you, unless you share a space. Your uploads stay in your own spaces.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="revision">
    <AccordionTrigger>How does revision work?</AccordionTrigger>
    <AccordionContent>Each lesson ends with flashcards and a short quiz. Nuton brings back the cards you found hardest.</AccordionContent>
  </AccordionItem>
</Accordion>

02Installation

1. Add the packages

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

Peer dependencies: react and react-dom 18 or later. The chevron indicator uses @remixicon/react. Accordion is built in-house: it doesn't need @radix-ui/react-accordion.

2. Load tokens and component styles once

// app/layout.tsx (or your app's entry file)
import '@nuton/tokens/tokens.css' // --nu-* design tokens
import '@nuton/ui/styles.css'     // component styles (uses the tokens)

Closed panels are hidden by the component styles, so the stylesheet is required. Headers and panels use --nu-font-body (Inter), as described on the Button page.

03Usage

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@nuton/ui'

export function CourseFaq() {
  return (
    <Accordion defaultValue="sources">
      <AccordionItem value="sources">
        <AccordionTrigger>What can I turn into a course?</AccordionTrigger>
        <AccordionContent>A topic you type, or your own PDFs, slides, videos and notes.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="privacy">
        <AccordionTrigger>Who can see my study materials?</AccordionTrigger>
        <AccordionContent>Only you, unless you share a space.</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

• Each AccordionItem needs a unique value. Pass defaultValue to start with an item open, or value + onValueChange to control it.
• type="single" (default) keeps one item open, like the live FAQ. Use type="multiple" when people compare sections, such as a study guide.
• Set headingLevel to fit the page outline. The default is 3, so an accordion under an h2 needs nothing.
• Keep headers short and specific: they are the button's accessible name.
• Don't hide content people must read to finish a task. Accordion is for optional or scannable detail.

04Variants and sizes

Two appearances and two indicators. Each header can add an icon and a description.

Appearance

<Accordion defaultValue="privacy">            // appearance="card" (default)
  <AccordionItem value="sources">…</AccordionItem>
  <AccordionItem value="privacy">…</AccordionItem>
</Accordion>

<Accordion appearance="flush" defaultValue="revision">
  <AccordionItem value="sources">…</AccordionItem>
  <AccordionItem value="privacy">…</AccordionItem>
</Accordion>

card is the live nuton.app FAQ: separate bordered cards, 12px apart, filled with Weak-50 when open. flush(code-only) splits rows with lines and has no side padding, for settings pages and panels that already have a frame.

Indicator

<Accordion indicator="chevron">…</Accordion>   // indicator="plus" is the default

The plus turns into a minus as it rotates (live FAQ). The chevron (code-only) turns over. Both are decorative: aria-expanded carries the state.

Icon and description

<AccordionItem value="ch-1">
  <AccordionTrigger icon={<RiBookOpenLine />} description="3 lessons · 14 min">
    Introduction to design principles
  </AccordionTrigger>
  <AccordionContent>…</AccordionContent>
</AccordionItem>

The icon is hidden from screen readers. The description is part of the button's name, read after the title, so the name matches the visible text (WCAG 2.5.3); the panel region is named by the title alone. The panel text lines up with the title.

Dimensions

Taken from the component CSS. Radius 16 matches the live FAQ (owner decision, 2026-10-14).

05States and interactions

Each header is a button, so it has the usual button states. The open state animates the panel's height.

The height, fill and indicator animate over --nu-duration-slow (300ms). Under reduced motion they change at once.

Tokens

06Composition examples

FAQ on a help page

One question open at a time, as on nuton.app. The page heading is an h2, so the questions stay h3.

<h2>Questions? We've got answers.</h2>
<Accordion>
  {faqs.map((item) => (
    <AccordionItem key={item.value} value={item.value}>
      <AccordionTrigger>{item.question}</AccordionTrigger>
      <AccordionContent>{item.answer}</AccordionContent>
    </AccordionItem>
  ))}
</Accordion>

Groups of settings

Flush rows with icons and a summary line. Several groups can be open; controls inside work as usual.

<Accordion type="multiple" appearance="flush" indicator="chevron" defaultValue={['notifications']} headingLevel={2}>
  <AccordionItem value="notifications">
    <AccordionTrigger icon={<RiNotification3Line />} description="Reminders and streaks">Notifications</AccordionTrigger>
    <AccordionContent>
      <Switch flip label="Daily study reminder" defaultChecked />
      <Switch flip label="Streak warnings" />
    </AccordionContent>
  </AccordionItem>
  …
</Accordion>

Study guide sections

Use type="multiple" so students can keep several chapters open. Pair it with an Expand all button when there are many sections (see Controlled).

07API reference

Accordion props

AccordionItem props

AccordionTrigger props

AccordionContent props

Styling hooks

The root is .nu-accordion with data-appearance, data-indicator and data-type. Items, buttons and panels carry data-state="open|closed". Use the tokens in Tokens to adjust it.

Accessibility

You must: set headingLevel to fit the page outline; give every item a unique value; keep header text meaningful on its own (“Billing”, not “More”).

Figma mapping

Figma has no Accordion (C3; every page searched on 2026-10-14). The card follows the live nuton.app FAQ. When a Figma component is added, map its properties here and re-check the code-only choices.

08Guidelines and related components

Do and don't

Common mistakes

• Reusing a value in two items: both open and close together.
• Leaving headingLevel at 3 under an h3, which breaks the page outline.
• Loading the component without @nuton/ui/styles.css: closed panels then show.
• Putting the only copy of required instructions in a closed panel.

Related components

• TabsSwitch between views of the same content.
• CardThe card radius, border and focus style Accordion shares.
• SwitchSettings controls inside a panel.
• StepperOrdered steps instead of independent sections.