Accessible accordion built on details and summary.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/faq
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { FaqAccordion } from "@/components/nextui/faq";23export function PricingFaq() {4return (5<FaqAccordion6items={[7{ question: "Do you have student pricing?", answer: "Yes, 50% off with a valid school email." },8{ question: "Can I change plans later?", answer: "Upgrade or downgrade any time from billing." },9]}10defaultOpenIndex={null}11/>12);13}
| Prop | Type | Default | Description |
|---|---|---|---|
| items | FaqItem[] | 3 sample questions | Questions and their answers |
| defaultOpenIndex | number | null | 0 | Item open on first render; null starts all closed |
| className | string | – | Extra classes on the card |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.