# circle-flags-ui Docs (@sankyu/react-circle-flags, @sankyu/vue-circle-flags, @sankyu/solid-circle-flags)

> Documentation for circle-flags-ui: 400+ circular SVG flags across React (stable), Vue 3 (beta), and Solid.js (beta), with TypeScript types, SSR support, and tree-shaking.

Vibe-coding assistant guidance:

- Start from `guides/getting-started/installation`, then choose one framework path (React, Vue 3, or Solid.js) and keep code examples framework-consistent.
- Prefer named flag imports for smallest bundles. Use `DynamicFlag` only when codes are runtime values.
- For runtime strings, normalize with `trim().toLowerCase()`, then use `isFlagCode()` or `coerceFlagCode()`.
- `FlagUtils.formatCountryCode()` returns uppercase display text; size presets come from `FlagSizes` / `FlagUtils.sizes` and use `xs | sm | md | lg | xl | xxl | xxxl`.
- `CircleFlag` is deprecated. Use named imports or `DynamicFlag` in new code.
- CDN usage is for prototypes/sandboxes; for production and offline-first UX, install from npm and bundle locally.

Use `/llms-small.txt` for fast context loading, `/llms-full.txt` for complete context, and `/_llms-txt/*.txt` for focused subsets.

## Documentation Sets

- [Abridged documentation](https://react-circle-flags.js.org/llms-small.txt): a compact version of the documentation for circle-flags-ui Docs (@sankyu/react-circle-flags, @sankyu/vue-circle-flags, @sankyu/solid-circle-flags), with non-essential content removed
- [Complete documentation](https://react-circle-flags.js.org/llms-full.txt): the full documentation for circle-flags-ui Docs (@sankyu/react-circle-flags, @sankyu/vue-circle-flags, @sankyu/solid-circle-flags)
- [Getting Started Guide](https://react-circle-flags.js.org/_llms-txt/getting-started-guide.txt): Core onboarding path for coding assistants: install, render flags, style, handle dynamic codes, and apply TypeScript-safe patterns
- [Advanced Usage](https://react-circle-flags.js.org/_llms-txt/advanced-usage.txt): Advanced implementation guidance including FlagUtils, type utilities, and practical CDN tradeoffs
- [Migration Guide](https://react-circle-flags.js.org/_llms-txt/migration-guide.txt): Migration notes from legacy react-circle-flags usage to the current circle-flags-ui patterns
- [API Reference](https://react-circle-flags.js.org/_llms-txt/api-reference.txt): Typed API surface for components, utility functions, and exported types

## Notes

- The complete documentation includes all content from the official documentation
- The content is automatically generated from the same source as the official documentation

## Optional

- [GitHub Repository](https://github.com/SanKyu-Lab/circle-flags-ui): Source code, issue tracker, and contribution guidelines
- [NPM (React Package)](https://www.npmjs.com/package/@sankyu/react-circle-flags): Stable React package information and release history
- [NPM (Vue Package)](https://www.npmjs.com/package/@sankyu/vue-circle-flags): Vue 3 beta package information
- [NPM (Solid Package)](https://www.npmjs.com/package/@sankyu/solid-circle-flags): Solid.js beta package information
- [LLMs Small Context](https://react-circle-flags.js.org/llms-small.txt): Token-optimized context for fast AI coding assistance
- [LLMs Full Context](https://react-circle-flags.js.org/llms-full.txt): Complete documentation context for deep reasoning