FAQ Accordion

A two-column FAQ with native disclosure controls that open and close each answer.

Dependencies: No extra packages
Size: 153 lines
Controls: 8 controls

example.tsx

1import { FaqAccordion } from "@/components/onycx/faq-accordion";23export default function Example() {4  return (5    <FaqAccordion6      eyebrow={"A little clarity"}7      heading={"Good\n*questions.*"}8      intro={"A few things you might be wondering."}9      multiple={false}10      defaultOpen={-1}11      showHeading12      background={"#f4f6f6"}13      ink={"#182831"}14    />15  );16}

Installation

CLI · shadcn registry

npx shadcn@latest add https://ui.onycx.dev/r/faq-accordion.json

1 · Dependencies

None beyond React and Tailwind.

2 · Copy the source

components/onycx/faq-accordion.tsx

Requires React 19 and Tailwind CSS v4. Copy the source from the faq-accordion.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.

Props

Prop	Type	Default	Description
items	FaqItem[]	—	{ question, answer } per row. Five studio questions by default.
eyebrow / heading / intro	string	—	Heading column: eyebrow with a 5px dot, uppercase heading (newlines break, asterisks set the serif) and a muted line.
showHeading	boolean	true	Two-column layout; false gives the list the full width.
multiple	boolean	false	When false the rows share a details name, so the browser keeps one open.
defaultOpen	number	-1	Row opened on first render, or -1 for none (the original starts closed).
background / ink / muted / line / accent	string	"#f4f6f6" / "#182831" / "#56646c" / "#d1dadd" / "#00638e"	Palette; accent is the focus ring.