リポジトリ外のアプリにインストール

@werft-ai/ui をこのリポジトリの外にある React アプリで使う方法である。リポジトリでパッケージをビルドして tarball にまとめ、アプリでそのファイルを npm install する。アプリに Tailwind はなくてもよい。

tarball を作る見出しのリンクをコピー

リポジトリのルートで実行する。リポジトリが固定している Bun 1.3.14(ルートの package.json の packageManager)と npm が必要である。

bun install
bun run --cwd packages/ui build:package
npm pack ./packages/ui/dist

build:package は packages/ui/dist に、ビルド済みの JavaScript と型宣言、CSS、配布用の package.json、LICENSE を作る。npm pack はそのディレクトリをまとめ、カレントディレクトリに werft-ai-ui-<バージョン>.tgz を置く。バージョンは packages/ui/package.json の version である。

アプリにインストールする見出しのリンクをコピー

Vite + React + TypeScript のアプリを例にする。アプリがなければ npm create vite@latest my-app -- --template react-ts で作る。

@werft-ai/ui は react と react-dom の ^19.3.0 を peer dependency として受け取る。アプリの React がこれより古ければ先に上げてから、作った tarball をインストールする。

npm install react@^19.3.0 react-dom@^19.3.0
npm install <リポジトリのパス>/werft-ai-ui-0.0.0.tgz

Radix、class-variance-authority、clsx、tailwind-merge、lucide-react はパッケージの dependency なので一緒にインストールされる。

CSS を読み込む見出しのリンクをコピー

ビルド済みの styles.css を一度 import する。トークン、キット要素のルール、キットが使うユーティリティクラスがすべて入っているので、Tailwind なしで描画される。

import "@werft-ai/ui/styles.css";
import { Button, Card } from "@werft-ai/ui";

styles.css には Tailwind の preflight(グローバルなリセット)が入っていない。グローバルに適用されるルールは一つだけで、すべての要素の既定の border-color を --werft-color-border にする。そのため、アプリが border-width と border-style だけを与えて色を決めていない要素は、この色で描画される(border ショートハンドは色も決めるので該当しない)。キットが前提とするリセット(枠線、margin、ボタンの背景、リンクの下線など)は、キット要素とその内側にだけ specificity 0 で適用される。そのため、キットの中に置いたアプリのマークアップもブラウザ既定の margin と下線が外れる。キットのルールは cascade layer の中にあるので、layer の外に書いたアプリの CSS が常に勝つ。

Tailwind v4 のアプリ見出しのリンクをコピー

アプリのマークアップでもキットのユーティリティ名(bg-primary、text-control、rounded-control など)を使うには、アプリの CSS で styles.css の後に theme.css を import する。theme.css がトークンを Tailwind のユーティリティにつなぐ。

@import "tailwindcss";
@import "@werft-ai/ui/styles.css";
@import "@werft-ai/ui/theme.css";

キットのコンポーネントが使うクラスは styles.css にすでに入っているので、node_modules を @source でスキャンする必要はない。

フォント見出しのリンクをコピー

パッケージにフォントは含まれていない。書体のリストは --werft-font-sans(Geist、Pretendard Variable の順)と --werft-font-mono(Geist Mono から)にあるが、styles.css はこの変数をキットの werft-* 要素にしか当てない。ボタンやセグメントコントロールなどのコントロールはアプリの書体を継承するため、アプリが body(または :root)に書体を指定しないと、ブラウザ既定の書体(多くは Times のような serif)で描画される。アプリの CSS に 1 行を置く。

body { font-family: var(--werft-font-sans); }

こうしておけば、アプリが Geist・Pretendard を読み込まなくてもリスト末尾のシステムフォントで描画される。ハングルを Pretendard で表示するには、アプリが自分で読み込む。このリポジトリの Web コンソールは pretendard パッケージの dynamic subset を使っている。

npm install pretendard

import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";

テーマ見出しのリンクをコピー

ライトが既定である。ダークテーマの有効化はテーマの適用と同じである。

import できるパス見出しのリンクをコピー

次のステップ見出しのリンクをコピー

• テーマの適用: ダークテーマと上書きのルール