Flag

Country flag icon. Pass an ISO 3166-1 alpha-2 country code; the image is loaded from /flags/{code}.png at runtime.

Default

Single flag, inline with text.

Dark previewReplay previewOpen in new tab
United StatesUnited States

Usage

Import the parts you need from the component's folder.

ts
import { Flag } from "@/components/ui/flag";

Inline list

Use Flag in a list of countries.

Dark previewReplay previewOpen in new tab
  • United StatesUnited States
  • United KingdomUnited Kingdom
  • JapanJapan
  • IndonesiaIndonesia
  • GermanyGermany

API Reference

Flag

PropTypeDefaultDescription
countrystring—ISO 3166-1 alpha-2 country code (e.g. 'us', 'id', 'jp'). Lowercased automatically.
countryNamestring—Used for alt and title text.
DistributionFlow