Accordion

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the component.

   npx shadcn@latest add @txbrendan/accordion

Props

• Accordion

  Root. Holds which sections are open. Takes value, defaultValue, onValueChange, multiple, disabled, and hiddenUntilFound.

  { value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[], details) => void; multiple?: boolean; disabled?: boolean; hiddenUntilFound?: boolean }

• size

  Accordion. Row height and text size: 36, 44, or 56px rows at the default density.

  "sm" | "md" | "lg" · default "md"

• multiple

  Accordion. Lets more than one section be open at once.

  boolean · default false

• value

  Accordion. The open items' values, controlled. Use it with onValueChange.

  string[]

• defaultValue

  Accordion. The items open at the start when you do not control it.

  string[]

• onValueChange

  Accordion. Called with the open items' values when one opens or closes.

  (value: string[], details) => void

• hiddenUntilFound

  Accordion or AccordionPanel. Keeps closed panels in the page with hidden='until-found', so find-in-page can open them.

  boolean · default false

• disabled

  Accordion or AccordionItem. Blocks opening and closing. It dims.

  boolean · default false

• AccordionItem

  Part. One section. A line separates it from the next. value names it for value and defaultValue.

  ComponentProps<"div"> & { value?: string }

• AccordionTrigger

  Part. The heading's button. It renders inside an <h3> and adds a chevron that turns when the section opens.

  ComponentProps<"button">

• AccordionPanel

  Part. The section's content. It grows open and shrinks closed.

  ComponentProps<"div">

• keepMounted

  AccordionPanel. Keeps the contents mounted while closed, preserving local field values. Hidden controls stay out of the tab order.

  boolean · default false

• className

  On any part. Later classes win. On AccordionPanel it goes on the inner box, where the padding is, so className='pb-6' works.

  string

Accessibility

• Each trigger is a button inside an <h3>, so screen reader users can jump between sections by heading.
• The button has aria-expanded and aria-controls. An open panel has role="region", named by its trigger.
• Each trigger is its own tab stop. Enter and Space open and close it. Arrow keys do not move between triggers, as in the current ARIA pattern.
• The chevron is hidden from screen readers. aria-expanded says whether a section is open.
• The heading level is fixed at h3. If the page needs another level, pass render to the header in your copy of accordion.tsx.
• The focus ring uses --ring, which the theme tests hold to 3:1 against the page and cards.
• Opening grows the panel over --motion-duration-base while its contents slide into place and fade in over 1.5 times --motion-duration-slow. Closing fades the contents over --motion-duration-close. Reduced motion removes height, content, and chevron movement; Motion Off removes all transitions.

Examples

<Accordion hiddenUntilFound>
  <AccordionItem value="refunds">
    <AccordionTrigger>Can I get a refund?</AccordionTrigger>
    <AccordionPanel>Yes, within 30 days of your order. We send the money back to the card you paid with.</AccordionPanel>
  </AccordionItem>
  <AccordionItem value="shipping">
    <AccordionTrigger>How long does shipping take?</AccordionTrigger>
    <AccordionPanel>Three to five working days in the US, and up to ten days anywhere else.</AccordionPanel>
  </AccordionItem>
</Accordion>

<Accordion multiple defaultValue={["account"]} size="lg">
  <AccordionItem value="account">
    <AccordionTrigger>Account</AccordionTrigger>
    <AccordionPanel keepMounted>
      <label>Display name <input defaultValue="Workspace owner" /></label>
    </AccordionPanel>
  </AccordionItem>
  <AccordionItem value="billing">
    <AccordionTrigger>Billing</AccordionTrigger>
    <AccordionPanel>Your plan, card, and past invoices.</AccordionPanel>
  </AccordionItem>
</Accordion>

"use client";
import { useState } from "react";

function Sections() {
  const [open, setOpen] = useState<string[]>([]);
  return (
    <Accordion value={open} onValueChange={(value) => setOpen(value as string[])}>
      <AccordionItem value="one">
        <AccordionTrigger>First section</AccordionTrigger>
        <AccordionPanel>Shown when open includes "one".</AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}