Skip to content
Circle Flags UICircle Flags UI

Getting Started

Welcome to circle-flags-ui, a modern library for circular flag components supporting multiple frameworks.

📖 Overview

Section titled “📖 Overview”

This library provides 400+ circular SVG flag components with Full-TypeScript support & Tree-shaking Optimization.

Perfect for applications that need fast, crisp country flags without external image requests.

📦 Available Packages

Section titled “📦 Available Packages”
Package Framework Status
@sankyu/react-circle-flags React ✅ Stable
@sankyu/vue-circle-flags Vue 3 🚧 Beta
@sankyu/solid-circle-flags Solid.js 🚧 Beta
@sankyu/svelte-circle-flags Svelte 5 🚧 Beta

🚀 Quick start

Section titled “🚀 Quick start”

Follow these guides to master the library:

1. 📦 InstallationAdd the package to your project with your preferred package manager
2. 📚 Basic UsageLearn how to import and render flag components
3. 🎨 StylingCustomize flags with Tailwind, CSS modules, or styled-components
4. 🌀 Dynamic FlagsRender flags based on runtime country codes
5. 🧑‍💻 TypeScriptLeverage full type safety and autocomplete
6. 📄 Bundle SizeOptimize your bundle with tree-shaking best practices
7. 🤖 LLM ContextUse llms.txt endpoints for faster AI-assisted coding workflows

✨ Key Features

Section titled “✨ Key Features”

400+ Flags

Comprehensive collection of country, territory, subdivision, and organization flags.

TypeScript Ready

Full type definitions with autocomplete and type safety for all components.

Tree-shakable

Framework-native ESM packages with tree-shakeable exports; React, Vue, and Solid also include CommonJS builds.

SSR Verified

First-response SVG rendering is continuously tested with Next.js App Router and Nuxt.

Inline SVG

Flags are embedded as framework components (named imports & DynamicFlag), so they work offline with no external requests.

Standard Props

Named imports & DynamicFlag accept standard SVG props for easy customization.

At a glance

Section titled “At a glance”

Modern Architecture

  • Framework-native ESM output
  • CommonJS compatibility for React, Vue, and Solid
  • Tree-shaking friendly
  • Minified production builds

Developer Experience

  • Full TypeScript definitions
  • Consistent naming pattern
  • Standard SVG props

Framework Support

  • React: Next.js (App Router & Pages), Remix…
  • Vue: Nuxt.js, Vue Router…
  • Solid: Vite 8…
  • Svelte: SvelteKit, Vite…

Performance

  • Offline-first rendering with no external requests (named imports & DynamicFlag)
  • Tiny per-flag size (~1-2 KB)

What’s next?

Section titled “What’s next?”

Ready to dive in? Start with Installation to add the library to your project.