Vertically Works

Vertically Works provides React components built specifically for vertical writing interfaces used in Chinese, Japanese, and Korean languages. These languages traditionally read top to bottom and right to left, following conventions that predate modern computing by centuries. Most UI libraries assume horizontal left-to-right layouts as the default and treat vertical text as an afterthought if they address it at all. Standard components break in subtle ways when the reading direction changes. Toggle switches move sideways when they should move vertically. Dialogs slide in from edges that don't match where the eye naturally flows next. Navigation assumes scrolling directions that feel backwards. Vertically Works rebuilds 20 common interface elements from scratch around true CSS writing-mode vertical-rl rather than bolting on overrides to horizontal components or using rotation tricks that create accessibility problems.

The collection includes dialogs, toggles, accordions, tooltips, sheets, tabs, and other building blocks that applications need regularly. What makes these different from adapted horizontal components is how interaction and motion follow the reading axis throughout. A toggle switch moves up for on and down for off because that matches the direction the eye travels through vertical text columns, not because someone rotated a horizontal toggle 90 degrees. Navigation elements enter from the left edge where the next column would appear rather than from screen edges that made sense only for horizontal layouts. These details seem small individually but compound into interfaces that feel natural rather than awkwardly adapted, respecting the reading flow users bring to CJK content rather than forcing them to adapt to assumptions baked in for Western languages.

Installation works through the shadcn-compatible component registry, so developers already using shadcn can add vertical components without changing their setup or learning a new system. Running npx verticallyworks init gets the system configured, and from there you pull in individual components as needed rather than importing a monolithic library. The entire project is open source under MIT licensing with the codebase available on GitHub for inspection, contribution, or forking. Four production applications demonstrate real-world implementation so you can see the components in actual use with real content rather than just isolated examples that might not reflect practical challenges like mixed-language handling or responsive behavior.

The design principles behind Vertically Works prioritize reading flow over conventional UI patterns that were designed with horizontal assumptions. Motion, interaction timing, and typography choices all defer to how CJK text actually reads rather than assuming Western reading habits can be rotated and called good enough. Accessibility comes built in from the start with keyboard navigation, touch support, screen reader compatibility, and reduced motion preferences all handled correctly for vertical layouts. Mixed language content where CJK and Latin text appear together gets specific attention since many real applications need both, and the interactions between vertical primary content and horizontal embedded elements require careful handling that generic components don't provide.

The target audience includes developers and designers building interfaces for CJK language speakers across various contexts. Native applications, language learning tools, publishing platforms, reading applications, cultural content sites, or any product where vertical text matters rather than being a nice-to-have will find the component library immediately useful. Teams creating apps that need to respect traditional writing systems rather than forcing horizontal layouts on users who read vertically will save significant effort. The alternative is either accepting awkward component behavior that breaks the reading experience or building custom vertical-aware versions from scratch, which takes significant time and expertise to get right across accessibility, responsiveness, and the many edge cases that arise.

Vertically Works grew from a 2019 UX Collective design exploration and continues as a living project rather than an abandoned experiment or proof of concept. The emphasis on genuine writing-mode vertical-rl implementation rather than workarounds that create accessibility issues or responsive problems reflects real commitment to solving the problem properly rather than just demonstrating that vertical UI could theoretically work. Being free and open source means you can adopt it without licensing concerns, inspect the implementation to understand how specific challenges are solved, and contribute improvements back. For anyone building React applications that serve CJK reading audiences and want those users to feel at home rather than working around an interface designed for someone else, it removes a significant obstacle that standard component libraries simply don't address despite the hundreds of millions of people who read these languages daily.