1

Grouped

A two column FAQ split by topic: each group has a small heading over its own hairline list, next to the heading and contact line.

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.

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

Topic groups. Each title is a heading over its own accordion.

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-grouped.json

How to use

<FaqGrouped
  groups={[
    {
      title: 'Billing',
      items: [{ value: 'refunds', question: 'Can I get a refund?', answer: 'Yes, within 30 days.' }],
    },
  ]}
/>

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

Sorted by topic, so you can go straight to the part you need.

Cannot find what you need? Write to the team

Getting started

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.

Design and access

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.

License and updates

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-grouped.json