Accordion React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Accordion from @/components/ui/accordion.

import { Accordion, type AccordionItemData } from "@/components/ui/accordion"

const faq: AccordionItemData[] = [
  {
    value: "posting",
    title: "How do I post a listing?",
    content: "Tap Post a listing, pick a category and upload your photos. The listing goes live within minutes.",
  },
  {
    value: "promotion",
    title: "How much does promotion cost?",
    content: "Promotion starts at $9.00 for 7 days, and the listing moves to the top results.",
  },
  {
    value: "returns",
    title: "Can I return an item?",
    content: "Yes, you have 14 days from delivery to return an item bought with delivery through the platform.",
  },
]

export function Faq() {
  return <Accordion items={faq} defaultValue="promotion" variant="separated" />
}

Props

• items*
  AccordionItemData[]

  The rows: { value, title, description?, icon?, extra?, content, disabled? }. value must be unique (a duplicate replaces the earlier row); extra is a short value before the indicator, like a price or a count. An empty list renders nothing.

• typedefault "single"
  "single" | "multiple"

  single keeps one row open at a time (value is a string); multiple lets any number stay open (value is a string[]).

• collapsibledefault true
  boolean

  single type only: the open row closes again when clicked. Turn it off for sections where one must always stay open.

• keepMounteddefault false
  boolean

  Keeps closed answers in the DOM (collapsed, hidden until found), so form fields keep their values, search engines read every answer and the browser's find in page opens the row that holds the match.

• headingLeveldefault 3
  2 | 3 | 4 | 5 | 6

  The heading level that wraps each row, so the accordion fits the page outline for screen readers.

• variantdefault "ghost"
  "ghost" | "outline" | "soft" | "separated"

  ghost is flush with hairlines between rows, outline and soft wrap the rows in one container, separated turns every row into its own raised card.

• sizedefault "md"
  "sm" | "md" | "lg"

  Row height 44 / 56 / 64px with title 14 / 15 / 16px and content 13 / 14 / 15px. Even sm stays a full 44px touch target.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corners of the outline and soft containers and of separated cards: 12 / 16 / 24px. On ghost rows it shapes the focus ring.

• indicatordefault "chevron"
  "chevron" | "plus" | "none"

  The open / closed mark. The chevron turns, the plus folds into a minus; none hides it.

• indicatorPositiondefault "end"
  "start" | "end"

  end puts the mark after the title. start puts it first, as a chevron that points at the title and turns down like a disclosure triangle; the content indents to the title.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  Tints the open row's icon tile and indicator.

• colordefault ""
  string

  Any CSS color for the open row's tint, mixed for contrast in both themes. Leave empty to use the tone.

• divideddefault true
  boolean

  Hairlines between rows. soft insets them to the row padding like a grouped list; separated cards ignore it.

• disableddefault false
  boolean

  Disables every row. Disable a single row with disabled on its item.

• value
  string | string[]

  The open row (single) or rows (multiple), to control the accordion from outside.

• defaultValue
  string | string[]

  The open row or rows on first render. Nothing is open by default ("" or []).

• onValueChange
  (value: string | string[]) => void

  Called with the new value: a string for single ("" when the row closes), a string[] for multiple.

• classNames
  Partial<Record<"item" | "trigger" | "icon" | "title" | "description" | "extra" | "indicator" | "content", string>>

  Extra classes for the inner parts of every row. content styles the padded inner box, not the animated wrapper.

• className
  string

  Extra classes for the root, merged last.

Parts

FAQ

Used in

More React layout components