shadcn.io is not affiliated with official shadcn/ui
Localization Coverage Dashboard Block for React
Ten locales with coverage bars and missing counts, the chosen locale's missing strings in a tree by namespace with counts rolled up to every branch, a Copy missing keys button and an Only incomplete switch.
Installation
Overview
Find the strings a locale still lacks, with this localization coverage panel for React with Base UI. A hairline frame with a plus mark on each corner has a list cell at the start of ten Phrasebase locales, least translated first, each with a coverage Progress bar, its translated count and how many are missing. The chosen locale's missing strings fill a Tree View at the end, grouped by namespace and section, with the number of strings missing under every branch rolled up from the leaves. A Button copies the missing keys to the clipboard, one per line, and a Switch in the header hides the locales that are complete. It's built from Tree View, Progress, Switch, Button, Native Select, Empty and Guides. For translation platforms and release checklists.
FAQ
How do I fill it with my translations?
Edit CATALOG, the namespaces with their sections and keys, and LOCALES, each with a name, a tag and how many strings it missing. Which keys a locale lacks is picked from the catalog with a seeded generator so the demo looks the same on every load; in your app, replace MISSING with the real list of keys for each locale. The coverage, the tree, its counts and the header are worked out from those.
How are the counts on the branches worked out?
A leaf counts as one string and a branch as the sum of everything under it, so a namespace shows how many strings are missing in all of its sections. The counts come from the tree itself, not from a typed number.
What does Copy missing keys copy?
The dotted key of every string the chosen locale lacks, one per line, such as billing.invoices.title, using the browser clipboard. The status line says how many were copied or that the browser refused. The button waits for a locale with nothing missing.
What does Only incomplete do?
It hides the locales that have every string, and the list says how many of the ten are shown. If the chosen locale is complete when you turn it on, the first incomplete locale is chosen so the tree is never showing something hidden.