Data display

Accordion

Questions or sections that open one at a time to keep a long page short.

open · closed · rotating chevron

How do I add GST to an invoice?

Add your GSTIN under Settings → Business. Every new invoice then splits tax into CGST and SGST, or IGST for customers in other states.

Can customers pay by UPI?

Yes. Each invoice carries a UPI link and QR code, and the payment is matched to the invoice automatically.

What happens when an invoice is overdue?

We send a polite reminder on the due date and again after 3 and 7 days. You can turn reminders off per customer.

import { ChevronDown } from "lucide-react";

type Item = { question: string; answer: React.ReactNode };

/** Native <details>: keyboard and screen-reader support for free. Give the
 *  items the same name to let only one stay open (supported in modern browsers). */
export function Accordion({ items, name = "faq" }: { items: Item[]; name?: string }) {
  return (
    <div className="w-full max-w-[480px] divide-y divide-border overflow-hidden rounded-lg border border-border bg-bg">
      {items.map((item, i) => (
        <details key={item.question} name={name} open={i === 0} className="group">
          <summary className="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3.5 text-sm font-medium transition hover:bg-surface [&::-webkit-details-marker]:hidden">
            {item.question}
            <ChevronDown className="size-4 shrink-0 text-fg-subtle transition-transform group-open:rotate-180" aria-hidden />
          </summary>
          <div className="px-4 pb-4 text-[13.5px] leading-relaxed text-fg-muted">{item.answer}</div>
        </details>
      ))}
    </div>
  );
}

The code uses the Taste Tailwind preset. Make yours on the Taste page with Export my system.