# Locale-aware Formats

**MUST** · **ID:** `content-locale-formats` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-locale-formats

> MUST: Locale-aware dates/times/numbers/currency

Format dates, times, numbers, and currency for user locale

Different regions format data differently (12/31/2024 vs 31.12.2024, $1,000.00 vs 1.000,00€). Use Intl API in JavaScript to format dates, numbers, and currency according to the user's locale automatically.

## Bad — do not do this

`content-locale-formats-bad`

```tsx
export function LocaleFormatsBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">Transaction Details</h3>
        <div className="space-y-3">
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Date</span>
            <span className="text-sm font-medium">12/25/2024</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Amount</span>
            <span className="text-sm font-medium">$1,234.56</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Items</span>
            <span className="text-sm font-medium">1,000</span>
          </div>
        </div>
        <p className="mt-3 text-xs text-muted-foreground">
          Hardcoded US format. A German user would expect 25.12.2024 for date and 1.234,56 € for currency.
        </p>
      </div>
      <p className="text-xs text-error mt-4">
        Hardcoded format - confusing for international users
      </p>
    </div>
  );
}
```

## Good — do this

`content-locale-formats-good`

```tsx
export function LocaleFormatsGood() {
  const date = new Date(2024, 11, 25);
  const amount = 1234.56;
  const items = 1000;

  // Using Intl API for locale-aware formatting
  const dateFormatter = new Intl.DateTimeFormat(undefined, {
    year: 'numeric',
    month: 'numeric',
    day: 'numeric',
  });
  const currencyFormatter = new Intl.NumberFormat(undefined, {
    style: 'currency',
    currency: 'USD',
  });
  const numberFormatter = new Intl.NumberFormat(undefined);

  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="font-semibold mb-3">Transaction Details</h3>
        <div className="space-y-3">
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Date</span>
            <span className="text-sm font-medium">{dateFormatter.format(date)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Amount</span>
            <span className="text-sm font-medium">{currencyFormatter.format(amount)}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-sm text-muted-foreground">Items</span>
            <span className="text-sm font-medium">{numberFormatter.format(items)}</span>
          </div>
        </div>
        <div className="mt-3 bg-success/10 border border-success/20 rounded-lg p-2">
          <code className="text-xs text-success font-mono">
            Intl.DateTimeFormat / Intl.NumberFormat
          </code>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Intl API formats for user's locale automatically
      </p>
    </div>
  );
}
```

## References

- [Internationalization API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl)