Set up
Navigation
Tabs
Conversation
MarkerMessage
ComponentsSet up

Set up

Two commands and an import. The CLI copies real source files into your project · there is no package to keep updated, and everything is styled by the token file you install once. Node 18+, React, any bundler.

01

Install the design tokens

Run once per project. This writes components/vw/tokens.css · semantic colors with light, dark, and sepia themes, spacing, radius, motion tokens, and the vertical-writing utilities every component relies on.

$ npx verticallyworks init
02

Import the tokens once, globally

In CSS (after Tailwind, if you use it) · or from your root layout. Either works; pick one.

css
1/* app/globals.css */
2@import "tailwindcss";
3@import "./components/vw/tokens.css";
tsx
1// app/layout.tsx (or your root layout)
2import "@/components/vw/tokens.css";
03

Add components

Each command copies that component's source into components/vw/. See everything available with npx verticallyworks list.

$ npx verticallyworks add vertical-button
04

Use it

tsx
1import { VerticalButton } from "@/components/vw/vertical-button";
2
3export function NextChapter() {
4 return <VerticalButton variant="primary">다음 장</VerticalButton>;
5}
05

Themes

The tokens ship three themes. Set data-theme on <html> · or scope it to any subtree to theme just that region.

html
1<!-- light is the default · set the attribute to switch -->
2<html data-theme="dark"> <!-- or "sepia" -->
06

Using shadcn? That works too

The registry speaks shadcn's format, so the shadcn CLI can install any component by URL · dependencies included.

bash
1npx shadcn add https://vertically.works/r/vertical-button.json

Everything is open source

The registry, the CLI, and this site live in one repository.

github.com/jihoons0/vertically-works