A card containing a collapsible FAQ item that smoothly expands and collapses its answer when the header is clicked.
import { ChevronDownIcon } from "lucide-react";
import { Card, CardContent } from "@/components/ui/v-collapsible-3-utils/card";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/v-collapsible-3-utils/collapsible";
export default function Default() {
return (
<div className="flex min-h-60 w-full items-center justify-center p-6">
<div className="h-40 w-full max-w-xs">
<Card className="py-0">
<CardContent className="px-3">
<Collapsible defaultOpen>
<CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-4 text-sm">
<span>How do I reset my password?</span>
<ChevronDownIcon
aria-hidden="true"
className="size-4 shrink-0 in-data-[state=open]:rotate-180 text-muted-foreground transition-transform"
/>
</CollapsibleTrigger>
<CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
<div className="pt-3 text-muted-foreground text-sm">
You can reset your password by clicking the "Forgot
Password" link on the login page. We'll send you an
email with instructions to create a new password.
</div>
</CollapsibleContent>
</Collapsible>
</CardContent>
</Card>
</div>
</div>
);
}
Part of Cnippet — browse the full library on 21st.dev.