Faq
Expandable FAQ accordion for help center and support pages: Faq, FaqItem, FaqQuestion and FaqAnswer parts. Questions keep a visible focus outline, answers align under the caret, and an open answer never widens the list.
pnpm dlx shadcn add @01orbital/faqThe source comes with full access.
One payment of $149 opens the source right here and lets the CLI install every paid component, with lifetime updates.
Usage
import {
Faq,
FaqAnswer,
FaqItem,
FaqQuestion,
} from "@/components/faq/faq"
const FAQS = [
{
id: "content",
question: "Can I use my own content?",
answer: "Yes. Pass your questions, answers, and links as FAQ data.",
},
{
id: "multiple",
question: "Can more than one answer stay open?",
answer: "Use the accordion’s multiple prop to keep several answers open.",
},
]
export default function FaqDemo() {
return (
<Faq className="w-full max-w-xl" multiple>
{FAQS.map((faq) => (
<FaqItem key={faq.id} value={faq.id}>
<FaqQuestion>{faq.question}</FaqQuestion>
<FaqAnswer>{faq.answer}</FaqAnswer>
</FaqItem>
))}
</Faq>
)
}Examples
New
faq-climbing-first-visit
Anatomy
Faq is built from 4 parts. In the example they nest like this:
Faq
└─ FaqItem
├─ FaqQuestion
└─ FaqAnswerFaq: A list of questions that open to show their answers, on the kit'sAccordion. Put aFaqIteminside for each question, each with aFaqQuestionand aFaqAnswer.FaqItem: One question and its answer insideFaq. Put aFaqQuestionand aFaqAnswerinside.valuenames it forFaq'sdefaultValueandvalue. The open item has no fill of its own.FaqQuestion: The question: the button that opens and closes its answer, with a caret at the end of the row.classNamesets its padding and gap; the stock row is padded 16px all round with 24px before the caret.FaqAnswer: The answer, shown when its question is open. Plain text, several<p>elements, links and a<ul>all work: paragraphs sit 16px apart, links are underlined and a list gets bullets.
API reference
Faq
A list of questions that open to show their answers, on the kit's Accordion. Put a FaqItem inside for each question, each with a FaqQuestion and a FaqAnswer.
It takes every Accordion prop: defaultValue or value with item values to open answers, multiple to let several stay open, onValueChange to follow them. className lands on the list, so rounded-none border-x-0 sets it between two rules.
Padding belongs to the parts: FaqQuestion pads the question row and FaqAnswer pads the answer, so px-0 on both sets a flush list.
It accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
FaqItem
One question and its answer inside Faq. Put a FaqQuestion and a FaqAnswer inside. value names it for Faq's defaultValue and value. The open item has no fill of its own.
It accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
FaqQuestion
The question: the button that opens and closes its answer, with a caret at the end of the row. className sets its padding and gap; the stock row is padded 16px all round with 24px before the caret.
It accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
FaqAnswer
The answer, shown when its question is open. Plain text, several <p> elements, links and a <ul> all work: paragraphs sit 16px apart, links are underlined and a list gets bullets.
It is padded 16px on the left and 56px on the right, so the text stops where the question's caret column begins. className changes that, as in pl-0 for a flush list.
An open answer never widens the list: the answer is kept out of the list's intrinsic width, so a Faq centered in an auto-width wrapper stays put when a long answer opens.
It accepts the props of the Base UI part it wraps, and the HTML attributes of the element it renders.
Dependencies
npm: cn. The CLI installs them for you.
Registry pieces it installs with it: