Foundation
PackagesUIArchitecture

Vendors

外部サービスのブランドガイドラインに準拠するコンポーネント。

責務

Vendorsは 外部サービスのブランドに紐づくコンポーネント を提供するレイヤーである。Primitives・Elements・Composites の3層構造とは独立した軸に位置し、外部サービス固有のブランドガイドライン（ロゴ・カラー・形状等）に準拠する必要があるコンポーネントを格納する。

  • 外部サービスのブランドガイドラインに準拠したUIを提供する
  • 認証ロジックやAPI通信は含まず、見た目とインタラクションのみを担う
  • アプリケーション側がコールバック（onClick 等）で処理を注入する
  • クライアント機能（hooks・イベントハンドラ等）を使う場合のみ 'use client' を宣言する

Vendorsが決めること

対象例
ブランドに準拠した見た目Googleロゴの配色、ボタンの背景色・ボーダー
ブランド固有のレイアウトロゴとテキストの間隔、ボタンの高さ
インタラクションhover・focus・disabled の見た目（ブランドに合わせて定義）
デフォルトのラベル「Googleでログイン」等、サービスに対応したテキスト

Vendorsが決めないこと

対象決める側
認証フローの実装利用者（アプリケーション）
ページ内の配置利用者（アプリケーション）
variant定義（CVA）行わない
デザイントークンによるスタイリング行わない

3層構造との違い

Vendorsが通常のElements・Compositesと異なる点を明確にする。

観点Elements / CompositesVendors
スタイルの基準デザイントークン・CVA variant外部ブランドガイドライン
Primitivesの使用必須（Primitives経由でスタイルを適用）使用しない（ブランド固有のスタイル）
色・形状の決定権デザインシステムが持つ外部サービスが持つ
className 合成cn() でPrimitivesのクラスをマージcn() で自前のクラスを合成
汎用性ドメイン非依存特定の外部サービスに依存

責務外

Vendorsが行ってはならないことを定義する。

  • 認証ロジックやAPI通信を持たない — OAuth処理やトークン管理はアプリケーション側の責務である
  • Primitivesに依存しない — ブランド固有のスタイルはPrimitivesのvariantで表現できないため、自前でスタイリングする
  • Elements・Compositesに依存しない — Vendorsは独立したレイヤーであり、他のレイヤーのコンポーネントを内部で使用しない
  • デザイントークンで色を管理しない — ブランドカラーは外部サービスが規定するため、トークン経由ではなく直接値で指定する

要件

要件詳細
'use client' 宣言hooks・イベントハンドラ・ブラウザAPIを使用する場合のみ宣言する
ブランドガイドライン準拠外部サービスが規定するロゴ・カラー・形状を正確に再現する
ロゴのインラインSVG外部画像やアイコンライブラリに依存せず、SVGをインラインで持つ
コールバックPropsonClick 等のコールバックで利用者側に処理を委ねる
アクセシビリティ装飾要素（ロゴ等）に aria-hidden="true" を付与する。キーボード操作に対応する
外部余白の禁止margin を持たない

Composites

複数のElementsを組み合わせて完結したUI単位を提供する。

Alert

操作結果やシステム状態をコンテンツ内にインラインで表示するフィードバックコンポーネント。

On this page

責務Vendorsが決めることVendorsが決めないこと3層構造との違い責務外要件