Skip to content
React Circle Flags @sankyu/react-circle-flags

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”
PackageFrameworkStatus
@sankyu/react-circle-flagsReact✅ Stable
@sankyu/vue-circle-flagsVue 3🚧 Beta
@sankyu/solid-circle-flagsSolid.js🚧 Beta

🚀 Quick start

Section titled “🚀 Quick start”

Follow these guides to master the library:

1. 📦 Installation Add the package to your project with your preferred package manager
2. 📚 Basic Usage Learn how to import and render flag components
3. 🎨 Styling Customize flags with Tailwind, CSS modules, or styled-components
4. 🌀 Dynamic Flags Render flags based on runtime country codes
5. 🧑‍💻 TypeScript Leverage full type safety and autocomplete
6. 📄 Bundle Size Optimize your bundle with tree-shaking best practices
7. 🤖 LLM Context Use 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

ESM + CJS outputs with named exports for optimal bundle size.

SSR Compatible

Works seamlessly with Next.js, Nuxt.js, Remix, SolidStart, Astro, and other SSR frameworks.

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

  • ESM + CJS dual format
  • 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: SolidStart…
  • …and more!

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.