The tabs run as a vertical rail on the right (leading) edge · each label set vertically · with the active tab marked by a bar on its content-facing edge. Categories live on the same axis as the reading.

tsx
1function VerticalContextTabs({ tabs, active, onChange }) {
return (
  <div role="tablist" aria-label="읽기 보기" style={{
    display: "flex",
    borderBottom: "1px solid var(--color-border)",
    gap: 0,
  }}>
    {tabs.map((tab) => (

Source

The exact file npx verticallyworks add tabs copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * VerticalTabs · a tab rail on the reading axis.
5 *
6 * The tablist is a vertical rail at the right edge · the reading start · with
7 * vertical labels, and panels sit to its left, where reading continues.
8 * Full `tablist`/`tab`/`tabpanel` semantics with `aria-orientation="vertical"`,

Guidance

Keep tabs horizontal · the horizontal axis separates content categories from reading content
Limit labels to 3 CJK characters or a short word
Place tab panel content in the vertical reading layout that follows

Don't

Stack tabs vertically without differentiating them from the rail
Use tabs for sequential content (use pagination or chapter navigation instead)
Add icons to tabs if labels are already short CJK characters

PreviousSlider Next Verse

1	function VerticalContextTabs({ tabs, active, onChange }) {
2	return (
3	<div role="tablist" aria-label="읽기 보기" style={{
4	display: "flex",
5	borderBottom: "1px solid var(--color-border)",
6	gap: 0,
7	}}>
8	{tabs.map((tab) => (

1	"use client";
2
3	/**
4	* VerticalTabs · a tab rail on the reading axis.
5	*
6	* The tablist is a vertical rail at the right edge · the reading start · with
7	* vertical labels, and panels sit to its left, where reading continues.
8	* Full `tablist`/`tab`/`tabpanel` semantics with `aria-orientation="vertical"`,