FAQ

Questions people ask before buying, answered in place: the heading and a way to ask more on one side, the questions in an accordion on the other.

npx prodular-ui add faq

Three questions

The heading stays in view while the answers scroll on wide screens.

Questions, answered

Still unsure? Write to us.

import { Faq } from "@/components/ui/faq"
export default function FaqQuestions() {  return (    <Faq      className="w-full"      lead="Still unsure? Write to us."      items={[        { question: "Will Relay email customers without asking?", answer: "No. Reminders go out on the schedule you set, and drafts wait for approval." },        { question: "Which ledgers does Relay sync with?", answer: "NetSuite, QuickBooks Online and Xero, both ways and every hour." },        { question: "How does the free trial work?", answer: "Growth for 14 days with your real data. No card needed." },      ]}    />  )}

Anatomy

<Section>  <Faq items={faqs} contact={<a href="/contact">Talk to us</a>} /></Section>

Guidance

Use it when

Near the end of landing and pricing pages.
contact with a way to reach a person.

Avoid

Marketing claims dressed as questions.
More than about eight questions. Link to a help center instead.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Write questions the way customers ask them, answers in two or three plain sentences.
Put it in a Section; it lays out its own two columns.

API

Faq

Prop	Type	Default	Description
items	{ question, answer }[]		Questions and answers.
title / lead / contact	ReactNode	"Questions, answered"	The side column.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add faq# or, with the registry in components.jsonnpx shadcn@latest add @prodular/faq

FAQ