components
Accordion
Accordions trade vertical space for focus. Only reach for one when the list of items is long enough that seeing everything at once is worse than scanning headers.
Read the full specSingle (default)
Only one panel open at a time. Pass `collapsible` to allow closing the active panel by clicking its header again.
Wolf is a WhatsApp-native community safety platform. Civilians report incidents in plain language; our agent routes, maps, and alerts.
<Accordion type="single" collapsible>
<AccordionItem value="q1">
<AccordionTrigger>What is Wolf?</AccordionTrigger>
<AccordionContent>…</AccordionContent>
</AccordionItem>
…
</Accordion>Multiple
Pass `type="multiple"` to let several panels stay open. Useful for settings groups or docs navigation.
We are live across multiple suburbs in Cape Town and Johannesburg, with new areas added every month.
Reporters are pseudonymised in the dispatcher view by default. Personally-identifying fields are only unlocked with audit logging and role-based access.
<Accordion type="multiple" defaultValue={["coverage", "privacy"]}>…</Accordion>With rich content
An accordion panel can host anything — not just text. Keep the trigger short and stash the detail inside.