About
A collapsible international money transfer UI that groups countries by region. Each row expands to reveal additional destinations with a fluid height animation powered by Framer Motion
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Country Accordion to your project and fits it to your theme.
Code
How Country Accordion is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { InternationalTransfer, type Region } from '@/components/ui/country-accordion';
const regions: Region[] = [
{
id: 'eu',
label: 'Europe',
countries: [
{ code: 'de', name: 'Germany' },
{ code: 'fr', name: 'France' },
{ code: 'gb', name: 'United Kingdom' },
{ code: 'it', name: 'Italy' },
{ code: 'es', name: 'Spain' },
{ code: 'nl', name: 'Netherlands' },
{ code: 'be', name: 'Belgium' },
{ code: 'ch', name: 'Switzerland' },
],
},
{
id: 'asia',
label: 'Asia Pacific',
countries: [
{ code: 'jp', name: 'Japan' },
{ code: 'cn', name: 'China' },
{ code: 'in', name: 'India' },
{ code: 'sg', name: 'Singapore' },
{ code: 'kr', name: 'South Korea' },
{ code: 'th', name: 'Thailand' },
{ code: 'my', name: 'Malaysia' },
{ code: 'ph', name: 'Philippines' },
],
},
{
id: 'americas',
label: 'Americas',
countries: [
{ code: 'us', name: 'United States' },
{ code: 'ca', name: 'Canada' },
{ code: 'mx', name: 'Mexico' },
{ code: 'br', name: 'Brazil' },
{ code: 'ar', name: 'Argentina' },
{ code: 'cl', name: 'Chile' },
{ code: 'co', name: 'Colombia' },
{ code: 'pe', name: 'Peru' },
],
},
];
export default function CountryAccordionDemo() {
return (
<div className="min-h-screen py-12 px-4">
<InternationalTransfer
subtitle="Global Coverage"
title="International Money Transfer"
description="Send money to friends and family in over 200 countries and territories. Competitive rates and fast transfers with real-time tracking."
ctaText="Start Sending"
regions={regions}
/>
</div>
);
}