Accordion

1import {
2  Accordion,
3  AccordionItem,
4  AccordionTrigger,
5  AccordionContent,
6} from "@/components/ui/accordion";
7 
8<Accordion type="single" defaultValue="reset">
9  <AccordionItem value="reset">
10    <AccordionTrigger value="reset">How do I reset my password?</AccordionTrigger>
11    <AccordionContent value="reset">
12      Click "Forgot password" on the login page, enter your email, and we'll
13      send a reset link. The link expires in class="text-amber-400">24 hours.
14    </AccordionContent>
15  </AccordionItem>
16  <AccordionItem value="plan">
17    <AccordionTrigger value="plan">Can I change my subscription plan?</AccordionTrigger>
18    <AccordionContent value="plan">
19      Yes — upgrade or downgrade anytime from Billing.
20    </AccordionContent>
21  </AccordionItem>
22  <AccordionItem value="pay">
23    <AccordionTrigger value="pay">What payment methods do you accept?</AccordionTrigger>
24    <AccordionContent value="pay">
25      All major cards, plus PayPal and Apple Pay on supported devices.
26    </AccordionContent>
27  </AccordionItem>
28</Accordion>

1import {
2  Accordion,
3  AccordionItem,
4  AccordionTrigger,
5  AccordionContent,
6} from "@/components/ui/accordion";
7 
8<Accordion type="multiple" defaultValue={["notif"]}>
9  <AccordionItem value="notif">
10    <AccordionTrigger value="notif">Notification settings</AccordionTrigger>
11    <AccordionContent value="notif">
12      Manage how you receive notifications.
13    </AccordionContent>
14  </AccordionItem>
15  <AccordionItem value="privacy">
16    <AccordionTrigger value="privacy">Privacy & security</AccordionTrigger>
17    <AccordionContent value="privacy">
18      Enable two-factor authentication and review signed-in devices.
19    </AccordionContent>
20  </AccordionItem>
21  <AccordionItem value="billing">
22    <AccordionTrigger value="billing">Billing & subscription</AccordionTrigger>
23    <AccordionContent value="billing">
24      View invoices and manage your plan.
25    </AccordionContent>
26  </AccordionItem>
27</Accordion>

1import {
2  Accordion,
3  AccordionItem,
4  AccordionTrigger,
5  AccordionContent,
6} from "@/components/ui/accordion";
7 
8<Accordion type="single" defaultValue="history">
9  <AccordionItem value="history">
10    <AccordionTrigger value="history">Can I access my account history?</AccordionTrigger>
11    <AccordionContent value="history">
12      Yes — the last class="text-amber-400">12 months of activity is available under Account → History.
13    </AccordionContent>
14  </AccordionItem>
15  <AccordionItem value="premium" disabled>
16    <AccordionTrigger value="premium" disabled>
17      Premium feature information
18    </AccordionTrigger>
19    <AccordionContent value="premium">Upgrade to unlock this section.</AccordionContent>
20  </AccordionItem>
21  <AccordionItem value="email">
22    <AccordionTrigger value="email">How do I update my email address?</AccordionTrigger>
23    <AccordionContent value="email">
24      Open Account → Profile, edit your email, and confirm.
25    </AccordionContent>
26  </AccordionItem>
27</Accordion>

1import {
2  Accordion,
3  AccordionItem,
4  AccordionTrigger,
5  AccordionContent,
6} from "@/components/ui/accordion";
7 
8{/* Default (divided) variant, framed with a border on the Accordion */}
9<Accordion type="single" defaultValue="how" className="rounded-lg border border-border px-4">
10  <AccordionItem value="how">
11    <AccordionTrigger value="how">How does billing work?</AccordionTrigger>
12    <AccordionContent value="how">
13      Monthly and annual plans, billed at the start of each cycle.
14    </AccordionContent>
15  </AccordionItem>
16  <AccordionItem value="secure">
17    <AccordionTrigger value="secure">Is my data secure?</AccordionTrigger>
18    <AccordionContent value="secure">
19      Encrypted in transit and at rest, with daily backups.
20    </AccordionContent>
21  </AccordionItem>
22  <AccordionItem value="integrations">
23    <AccordionTrigger value="integrations">What integrations do you support?</AccordionTrigger>
24    <AccordionContent value="integrations">
25      Slack, GitHub, Linear, and a REST API.
26    </AccordionContent>
27  </AccordionItem>
28</Accordion>

1import {
2  Accordion,
3  AccordionItem,
4  AccordionTrigger,
5  AccordionContent,
6} from "@/components/ui/accordion";
7import {
8  Card,
9  CardContent,
10  CardDescription,
11  CardHeader,
12  CardTitle,
13} from "@/components/ui/card";
14 
15<Card>
16  <CardHeader>
17    <CardTitle>Subscription & billing</CardTitle>
18    <CardDescription>Common questions about plans and payments.</CardDescription>
19  </CardHeader>
20  <CardContent>
21    <Accordion type="single" defaultValue="plans">
22      <AccordionItem value="plans">
23        <AccordionTrigger value="plans">What subscription plans do you offer?</AccordionTrigger>
24        <AccordionContent value="plans">
25          Starter, Professional and Enterprise.
26        </AccordionContent>
27      </AccordionItem>
28      <AccordionItem value="cancel">
29        <AccordionTrigger value="cancel">How do I cancel?</AccordionTrigger>
30        <AccordionContent value="cancel">
31          Cancel anytime from Billing.
32        </AccordionContent>
33      </AccordionItem>
34    </Accordion>
35  </CardContent>
36</Card>

1import {
2  Accordion,
3  AccordionItem,
4  AccordionTrigger,
5  AccordionContent,
6} from "@/components/ui/accordion";
7 
8<div dir="rtl">
9  <Accordion type="single" defaultValue="reset">
10    <AccordionItem value="reset">
11      <AccordionTrigger value="reset">كيف يمكنني إعادة تعيين كلمة المرور؟</AccordionTrigger>
12      <AccordionContent value="reset">
13        انقر على «نسيت كلمة المرور» في صفحة تسجيل الدخول.
14      </AccordionContent>
15    </AccordionItem>
16    <AccordionItem value="plan">
17      <AccordionTrigger value="plan">هل يمكنني تغيير خطة الاشتراك؟</AccordionTrigger>
18      <AccordionContent value="plan">نعم — في أي وقت من صفحة الفوترة.</AccordionContent>
19    </AccordionItem>
20  </Accordion>
21</div>