Accordion

npx shadcn@latest add https://ui.saasflare.io/r/accordion.json

pnpm add @saasflare/ui

"use client"import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@saasflare/ui"/** A single-open FAQ accordion with realistic billing questions. */export function Demo() {    return (        <Accordion type="single" collapsible className="w-full max-w-md">            <AccordionItem value="billing">                <AccordionTrigger>How does billing work?</AccordionTrigger>                <AccordionContent>                    You are billed monthly per active seat. Upgrades are prorated instantly, and                    downgrades take effect at the start of your next cycle.                </AccordionContent>            </AccordionItem>            <AccordionItem value="cancel">                <AccordionTrigger>Can I cancel anytime?</AccordionTrigger>                <AccordionContent>                    Yes. Cancel from Settings → Billing and you keep full access until the end of                    the current period. No cancellation fees, ever.                </AccordionContent>            </AccordionItem>            <AccordionItem value="data">                <AccordionTrigger>What happens to my data if I leave?</AccordionTrigger>                <AccordionContent>                    Export everything as CSV or JSON before you go. We retain data for 30 days after                    cancellation, then permanently delete it.                </AccordionContent>            </AccordionItem>        </Accordion>    )}

"use client"import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@saasflare/ui"/** A multi-open accordion where several sections can stay expanded at once. */export function Demo() {    return (        <Accordion type="multiple" defaultValue={["security"]} className="w-full max-w-md">            <AccordionItem value="security">                <AccordionTrigger>Security &amp; compliance</AccordionTrigger>                <AccordionContent>                    SOC 2 Type II certified, with data encrypted at rest and in transit. SSO and SCIM                    provisioning are available on the Enterprise plan.                </AccordionContent>            </AccordionItem>            <AccordionItem value="integrations">                <AccordionTrigger>Integrations</AccordionTrigger>                <AccordionContent>                    Connect Slack, GitHub, Linear, and Stripe out of the box. Build custom workflows                    with webhooks and the REST API.                </AccordionContent>            </AccordionItem>            <AccordionItem value="support">                <AccordionTrigger>Support &amp; SLAs</AccordionTrigger>                <AccordionContent>                    Email support on every plan. Pro adds priority response within 4 hours, and                    Enterprise includes a dedicated success manager with a 99.9% uptime SLA.                </AccordionContent>            </AccordionItem>        </Accordion>    )}