Components
Loading preview...
Here is Collapsible component
npx shadcn@latest add https://21st.dev/r/anubra266/collapsible-1import { Collapsible } from "@ark-ui/react/collapsible";
import { ChevronDownIcon } from "lucide-react";
const faqs = [
{
question: "What is the return policy?",
answer:
"You can return any item within 30 days of purchase for a full refund, provided it's in its original condition.",
},
{
question: "How long does shipping take?",
answer:
"Standard shipping takes 5-7 business days. Express shipping is available for 2-3 business days.",
},
{
question: "Do you ship internationally?",
answer:
"Yes, we ship to most countries worldwide. International shipping typically takes 7-14 business days.",
},
];
export default function FAQStyleCollapsible() {
return (
<div className="w-full max-w-2xl space-y-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-6">
Frequently Asked Questions
</h3>
{faqs.map((faq, index) => (
<Collapsible.Root
key={index}
className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden"
>
<Collapsible.Trigger className="w-full flex items-center justify-between px-6 py-4 text-left bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 group">
<span className="font-medium text-gray-900 dark:text-gray-100 pr-4">
{faq.question}
</span>
<Collapsible.Indicator className="transition-transform duration-200 shrink-0 data-[state=open]:rotate-180">
<ChevronDownIcon className="w-5 h-5 text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300" />
</Collapsible.Indicator>
</Collapsible.Trigger>
<Collapsible.Content className="overflow-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1">
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
<p className="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
{faq.answer}
</p>
</div>
</Collapsible.Content>
</Collapsible.Root>
))}
</div>
);
}