Traditional / Simplified Toggle

A Traditional / Simplified Chinese toggle that cross-fades the body text character by character.

A toggle between Traditional and Simplified Chinese: the 「簡／简」 label on the toggle itself converts along with the variant, and the characters in the body that actually change cross-fade one by one on a stagger — the old character drifts up and out while the new one floats in from below. It ships with 76 common single-character mappings for demonstration and can be extended with table; for production, wire it up to a complete conversion library such as opencc-js.

Loading preview…

npx shadcn@latest add https://webberui.com/r/traditional-simplified-toggle.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Default typefacedefaultVariant

Per-character stagger (s)stagger

0.02

Transition duration (s)duration

0.4

<TraditionalSimplifiedToggle />

Installation

npx shadcn@latest add https://webberui.com/r/traditional-simplified-toggle.json

Or, once registries are configured in components.json, install it as @webberui/traditional-simplified-toggle.

Usage

import { TraditionalSimplifiedToggle } from "@/components/ui/traditional-simplified-toggle";

<TraditionalSimplifiedToggle
  text="我們熱愛繁體中文的美，也理解簡體中文的便利。"
  defaultVariant="traditional"
  onVariantChange={(variant) => console.log(variant)}
  table={{ "鳳": "凤" }}
/>

Props

Prop	Type	Default	Description
`text`	`string`	—	The text to display and convert; either Traditional or Simplified input works (it is normalized to Traditional internally) and `\n` line breaks are supported
`variant`	`ScriptVariant`	—	Current variant in controlled mode: `"traditional"` or `"simplified"`
`defaultVariant`	`ScriptVariant`	`"traditional"`	Initial variant in uncontrolled mode
`onVariantChange`	`(variant: ScriptVariant) => void`	—	Callback when the variant is toggled
`table`	`Record<string, string>`	76 built-in pairs	Additional Traditional → Simplified mappings, merged with the built-in table (matching keys override the built-ins)
`stagger`	`number`	`0.02`	Interval between characters as the changed ones cross-fade (seconds)
`duration`	`number`	`0.4`	Duration of a single character's cross-fade (seconds)
`className`	`string`	—	Forwarded to the outermost container
`textClassName`	`string`	—	Forwarded to the body paragraph

Accessibility

The toggle is a real button using aria-pressed to convey the current variant plus an explanatory aria-label, and it is operable by keyboard with Tab / Enter
The full converted text is provided sr-only for screen readers, while the per-character animated glyphs are hidden from assistive technology (aria-hidden)
When the user has "reduce motion" enabled at the system level, the switch becomes an instant static replacement with no per-character animation and no pill bounce