shadcn.io is not affiliated with official shadcn/ui
Localized Changelog Block for Ark UI
A release in five languages: a Select rewrites a framed card (title, language badge, type words, dates and sentences) and sets the card's language and direction, right to left for Arabic.
Installation
Overview
A localized changelog for React with Ark UI, written for Wordbridge, a fictional localisation platform. A compact header carries the title, one sentence and, at its end, a Select of five languages (English, Español, Deutsch, 日本語, العربية), full width on a phone. Under it a framed card holds one release: a title, a language badge and three entries, each with its version, its date as that language writes it, a type tag (an icon and a word) and one sentence. Choosing a language rewrites all of it, and the card carries the language code and its direction, with Arabic switching the card to an RTL layout, so assistive technology reads each language correctly. Versions stay in order and in mono. All five translations sit unseen in one grid cell, so the card never changes height. It's built from Guides, Badge and Select, with CSS transitions for the entrance and your theme's tokens for every colour. For global products that publish release notes in more than one language. The translations are examples, written for this block.
FAQ
How do I add or change a language?
Edit LANGUAGES at the top of the file. A language has a code, the name it calls itself, rtl (true for a language with an RTL script), a title and its entries. An entry has a version, the day as that language writes it, the same day as an ISO iso date, a kind, the type word as tag and the text. The Select's items are built from the same list, so a new language appears in it without more edits.
How does the direction change for Arabic?
The card is the element that carries lang and dir, so only its contents flip. Its spacing uses logical properties (start and end), so padding, the badge and the date column mirror by themselves. Versions are set in mono with dir="ltr" so "5.2.0" always reads the same, and each date is wrapped so mixed text and numbers keep their order. The page around the card stays in its own direction.
How does the Select work?
It's the catalog's Select with a visible "Language" label and one item per language, shown by the language's own name. It opens with Enter, Space or the arrow keys, the arrows move through the items and Escape closes it. A visually hidden polite line says which language is showing.
Why does the page not move when I change language?
Translations differ in length, so every language's card is also laid out unseen in the same grid cell, and the tallest sets the height. The unseen copies are hidden from assistive technology and the keyboard, and they carry their own direction so they are measured correctly.