Vertically Works · React components for vertical writing interfaces (CJK) · Vertically Works<br>Interfaces for<br>vertical writing<br>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.<br>20 componentsKorean, Japanese, Chinese4 applications<br>Explore Components

See the apps

세로쓰기縦書き竖排

A living study by Jihoon Suh.

“Why don’t we have any user interfaces in vertical format?”<br>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.Learn more about why I’m doing this

Components<br>All components<br>열기

다음 장으로 갈까요?취소이동

01Vertical dialogView componentTitle, body, and actions read as columns, right to left. The overlay is a layer above the flow, so it scales from center.야간 모드

세로 읽기

02List-cell toggleView componentThe 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.할 일<br>우유 사기산책 하기

03Column accordionView componentDisclosure widens the cell sideways: detail unfolds as new columns beside the title, so the column's reading length never breaks.1첫째 줄글씨를 세로로 쓰고<br>2둘째 줄오른쪽에서 왼쪽으로

04Tooltip on hoverView componentHover 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.글을 세로로읽는 화면<br>메뉴<br>설정

05Edge sheetView componentThe 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.<br>소개기능설정

06Vertical tabsView componentA 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.

Applications<br>All applications

LiveiOS<br>Verse<br>A fully vertical, right-to-left Bible for Korean, Japanese, and Chinese.<br>Columns snap per column, not per page<br>Tate-chu-yoko (縦中横) verse numbers<br>RTL-native chrome, scroll-driven immersion<br>View case study

LiveWeb<br>To-do<br>A to-do list where every task is a column you read top to bottom.<br>Tasks are full-height columns, newest at the reading start<br>Pull down to delete, drag sideways to reorder<br>한 / あ / 中 re-localizes the whole interface<br>View case study

LiveWeb<br>Chat<br>An AI chat that reads top to bottom, right to left · every turn is a column.<br>New turns enter from the left, oldest at the right edge<br>Speaker marked at the top of each column, not by side<br>The composer is the rightmost column · answers stream down it<br>View case study

News<br>WIPWeb<br>A daily newspaper setting live Korean, Japanese, and Chinese headlines right to left.

View case study<br>Listen<br>WIPWeb<br>A podcast player where transcripts fall as time-synced vertical verse.

View case study

What This Project Explores<br>All challenges

읽기 ↓

MotionShould a sheet animate from screen geometry or reading direction?

「창 1:1」「창 1:1」<br>TypographyHow should mixed CJK and Latin content behave in the same column?

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

세로쓰기라고도부른다

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

가1 가2 家3 加

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

↑←↓→<br>↓ 다음 글자← 다음 줄

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

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

안녕하세요반가워요

AIHow should AI chat interfaces adapt to vertical writing systems?

Derived Principles<br>01Respect Reading Flow<br>Begin with how the reader moves, not convention.

02Motion Has Meaning<br>Animation reinforces reading direction, never decoration.

03Interaction Before Typography<br>Behavior is the goal; typography enables it.

04Mixed Language First<br>Design for mixed scripts, not the average.

05Accessibility Is Fundamental<br>Keyboard, touch, screen reader, reduced motion, built in.

06Progressive Familiarity<br>New readers need a ramp · deepen the vertical commitment gradually.

07Research Never Ends<br>Document open questions beside resolved ones.

Bring them into your project<br>Use them in your own project. Open source on GitHub, MIT-licensed.

npx verticallyworks init<br>View on GitHub

Say hello<br>Name<br>Email<br>Purpose<br>CollaborationGeneralFeature · App request

VerticalHorizontal

Send