shadcn.io is not affiliated with official shadcn/ui
Translation Panel AI Block for Svelte
Translate a phrase and compare tones: English, Spanish and French in either direction, a swap button, three sample sentences, a Neutral, Formal or Casual tone group, marked glossary terms and an empty state for anything else.
Installation
Overview
Show a phrase in another language and how its tone changes, with this translation panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a From and a To Native Select around a swap button, three sample sentences as buttons, and a tone group, Neutral, Formal or Casual. A Textarea takes the source and the target reads from a typed phrasebook of three sentences in English, Spanish and French, looked up in either direction: type or paste any of the three in any of the languages and it answers in the other. The tone group replaces the target, glossary terms are marked in it and listed underneath beside their source words, and anything else shows an Empty state saying only the sample sentences are translated here. There is no quality score. The Shine Button, the only colored control, copies the translation. Guides rule the bands. For support tools, travel apps and any place that needs a worked example of translation UI.
FAQ
What stays in the page, and how do I make it real?
Everything. The phrasebook is typed in CONCEPTS, the lookup is a comparison in the browser, and Copy writes to your clipboard. No model translates anything and nothing is sent. To make it real, replace translationOf with a call to your translation service and keep the select, swap and tone controls as they are.
How does the lookup work?
Your text is compared with every tone of each sentence in the source language, ignoring case, accents, spacing and the punctuation marks . , ! ? and their Spanish opening forms. A match gives the sentence in the target language and the chosen tone. Anything else is not translated.
What does Swap do?
It exchanges the two languages and, when the text was translated, puts the translation into the source field, so you can read it back. Choosing the same language on both sides moves the other select to the one you left.
What are the glossary terms?
Four typed terms: train station, table, help and thank you. Where one appears in the translation it is marked, and the list under the two fields pairs its word in the source with its word in the target.