1

Accordion

A two column FAQ: heading and a quiet contact line with the team avatars on the start side, a flat hairline list of questions on the end side. It stacks on mobile.

Dependencies

motion@hugeicons/react@hugeicons/core-free-icons

Interaction Type

A labelled section landmark. Questions sit in a flat list divided by hairlines; each is a heading with a button. Enter or Space opens it, its answer unfolds and the chevron turns. One answer stays open at a time and can be closed again. Reduced motion opens answers without the unfold.

Props

Options you can pass to customize this component.

Prop
Type
Description
title
ReactNode

Section heading. Defaults to "Frequently asked questions".

description
ReactNode

Supporting text under the heading.

items
{ value: string; question: string; answer: ReactNode }[]

Questions and answers. The value must be unique.

supportPeople
{ name: string; src?: string }[]

Overlapping avatars above the contact line. Without src they show initials.

supportText
ReactNode

Line under the avatars. Defaults to "Cannot find what you need?".

supportLabel
string

Contact link text. Defaults to "Write to the team". Empty hides it.

supportHref
string

Where the contact link points.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/faq-accordion.json

How to use

<FaqAccordion
  items={[
    { value: 'refunds', question: 'Can I get a refund?', answer: 'Yes, within 30 days.' },
    { value: 'teams', question: 'Is there a team plan?', answer: 'Yes, from three seats.' },
  ]}
  supportHref="/contact"
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app

Frequently asked questions

Installing, theming and licensing, in short answers.

Cannot find what you need? Write to the team

Run the add command shown on its page. The source is copied into your project, so every line is yours to read and change.

Yes. Components are styled with Tailwind v4 utilities and read every color from CSS variables, so they follow your own tokens.

Every component reads semantic tokens that switch under a .dark class on a parent. No component needs its own dark mode code.

They use semantic HTML, full keyboard support and visible focus rings, and they respect reduced motion. Each page lists its keyboard interactions.

Yes. The code is MIT with the Commons Clause: ship your own products with it, just do not resell the components themselves as a kit.

The code lives in your project, so nothing changes on its own. Run the add command again to pull a newer version and review the diff.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/faq-accordion.json