Interfaces for
vertical writing

Every UI component you know assumes horizontal text. Vertically Works is what buttons, toggles, dialogs, and lists become when reading flows top to bottom, right to left.

20 componentsKorean, Japanese, Chinese4 applications

Applications

All applications
VerseA fully vertical Bible reader
To-doEvery task is a column
NewsHeadlines as a vertical newspaper
ChatAn AI chat that reads vertically

Components

All components
01Vertical dialogTitle, body, and actions read as columns, right to left. The overlay is a layer above the flow, so it scales from center.02List-cell toggleThe on/off thumb travels the reading axis · up is on · and flipping it re-themes the cells, so the toggle matches the direction the eye moves.03Column accordionDisclosure widens the cell sideways: detail unfolds as new columns beside the title, so the column's reading length never breaks.04Tooltip on hoverHover still exists in vertical UI: the tooltip opens to the left of the trigger, following reading direction, never below, where it would break the column.05Edge sheetThe sheet enters from the reading direction · the left edge, where the next column would appear · not from screen geometry. Scrim, slide, and dismissal all travel the same axis.06Vertical tabsA tab rail on the reading axis: vertical labels stacked at the right edge, panels unfolding to their left, the selection indicator traveling down the rail · never across it.
The original 2019 UX Collective article, Introducing Vertically Works
Jihoon Suh

A living study by Jihoon Suh.

“Why don’t we have any user interfaces in vertical format?”
Asked in Introducing Vertically Works, the design exploration published on UX Collective in December 2019. Everything on this site is the long answer to that question.
Why I built this

What This Project Explores

All challenges
Motion

Should a sheet animate from screen geometry or reading direction?

Typography

How should mixed CJK and Latin content behave in the same column?

Navigation

Where does the navigation rail belong in a vertical-first interface?

Interaction

How does text selection work when reading flows top-to-bottom, right-to-left?

IME

Where does the IME candidate window appear when input is vertical?

Accessibility

What do the arrow keys mean in a vertical, RTL interface?

Interaction

How does drag-and-drop reordering work when list items are columns?

AI

How should AI chat interfaces adapt to vertical writing systems?

What Every Component Ships With

True vertical writing

Real writing-mode: vertical-rl with text-orientation: mixed. No horizontal text rotated to look vertical.

Demos in three scripts

Every component demos live in Korean, Japanese, and Chinese. One 한 / あ / 中 toggle re-localizes the whole site.

Accessibility built in

Keyboard, touch, screen reader, and reduced-motion behavior ship with every component.

Design tokens

Semantic color, spacing, radius, and motion tokens. Components never hardcode a value.

Copy-in source

Installs as plain React files you own and edit. Standalone, with no runtime dependency on this site.

Do, don't, open questions

Each doc lists what to do, what to avoid, and what nobody has settled yet. Open questions carry the same weight as the answers.

Bring them into your project

Use them in your own project. Open source on GitHub, MIT-licensed.

npx verticallyworks init
View on GitHub

Say hello

Purpose