Vertically Works

Vertically Works is an open-source design system that provides React components engineered for vertical writing interfaces. Most UI libraries assume horizontal text, left-to-right reading, and layouts that flow down the page. This one flips that assumption for Chinese, Japanese, and Korean content, where traditional reading flows top-to-bottom and right-to-left. It's not a wrapper that rotates existing components. The entire interaction model is rebuilt around vertical text.

The problem it solves is subtle but real. When you take a standard dialog, toggle, or tab component and try to use it with vertical writing, the result feels wrong. Sheets slide in from the bottom when they should enter from the reading direction. Selection indicators travel horizontally when the eye is moving vertically. Vertically Works addresses this by deriving its design decisions from the writing system itself, not from screen geometry. The result is a set of components that feel native to CJK readers rather than retrofitted.

The library includes 20 React components covering dialogs, toggles, lists, tooltips, sheets, and tabs. Each one handles the nuances of vertical layout, including mixed-language content where CJK and Latin text appear together. Motion design reinforces the reading direction, so animations guide the eye along the natural flow. Accessibility is built in, with keyboard, touch, screen reader, and reduced-motion support working out of the box.

Beyond components, the project ships four working applications that demonstrate practical use. There's a Bible reader, a to-do list, a newspaper-style news reader, and an AI chat interface. These aren't demos. They're functional apps that show how the components behave in real contexts. If you're trying to understand how vertical tabs should work in a task manager, you can look at working code instead of guessing.

It's aimed at developers and product teams building for CJK-speaking users who care about getting vertical writing right. If you're making a reading app, a journaling tool, or anything where traditional typographic conventions matter, this saves months of design research and custom CSS. The documentation includes seven derived principles that explain the reasoning behind each decision, plus open research questions where the team is still exploring solutions.

Vertically Works is MIT-licensed and installable via npx. It's built on React and Next.js, with a shadcn-compatible component registry so you can pull in individual pieces. There's no paid tier. The whole system is free to use, fork, and extend.