Designing Interfaces for Vertical Writing Systems

Components

The interaction primitives of a vertical interface · real, accessible React components you copy into your project with one command.

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.

Bring them into your project

Every component is source you own · no runtime dependency. Run init once for the tokens, then add any component · fetched live from the registry, nothing to configure.

npx verticallyworks init

View on GitHub

Applications

All applications

What happens when vertical-first thinking is applied to actual product categories.

Vertically VerseLiveiOS

A fully vertical, right-to-left Bible for Korean, Japanese, and Chinese.

Vertically NotesLiveWeb

A to-do list where every task is a column you read top to bottom.

Coming soon

Vertically ListenWIPWeb

A podcast player where transcripts fall as time-synced vertical verse.

Coming soon

Vertically NewsWIPWeb

A daily newspaper setting live Korean, Japanese, and Chinese headlines right to left.

What This Project Explores

All challenges

Open questions, and the principles derived from trying to answer them.

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?

How should AI chat interfaces adapt to vertical writing systems?

Derived Principles

Respect Reading Flow

Begin with how the reader moves, not convention.

Motion Has Meaning

Animation reinforces reading direction, never decoration.

Interaction Before Typography

Behavior is the goal; typography enables it.

Mixed Language First

Design for mixed scripts, not the average.

Accessibility Is Fundamental

Keyboard, touch, screen reader, reduced motion, built in.

Research Never Ends

Document open questions beside resolved ones.

Contact us

Questions, ideas, collaborations — write to us anytime. Compose your message vertically or horizontally, whichever way you think.