インストール

パッケージは npmjs.org に public 公開（OIDC Trusted Publisher）されており、auth / PAT は不要です。npm group（tokens / tailwind-preset / css-tokens / react）は lockstep で同一バージョンに揃います。

1. パッケージを導入

bash

# npmjs.org public — auth / PAT 不要
npm i @willink-labs/react @willink-labs/tailwind-preset @willink-labs/tokens

bash

# 非 Tailwind consumer (WordPress / Astro / Vue / plain CSS) は css-tokens を追加
npm i @willink-labs/css-tokens

2. Tailwind preset を import

preset を 1 行 import するだけです。auto-safelist が同梱されるため、 consumer 側で @source ディレクティブを書く必要はありません。

css

/* globals.css */
@import "@willink-labs/tailwind-preset/preset.css";

3. 使う

tsx

import { Button, Badge } from "@willink-labs/react";

export function Example() {
  return (
    <div>
      <Badge>NEW</Badge>
      <Button>Click</Button>
    </div>
  );
}

Flutter

Flutter 向けは willink_theme（pub.dev・Material 3）を pubspec に追加し、WillinkTheme.willink() をMaterialApp.theme に渡します。npm group とは独立 versioning です。

次はブランドとテーマ — --color-brand 1 行でブランド全体を切り替えます。