coss.com uiが面白そうなので調べてみた話

はじめに

正直なところ、React向けのUIライブラリって本当に多いんですよね。Material UI、Chakra UI、shadcn/ui...選択肢が多すぎて逆に困る。

そんな中で見つけたのがcoss.com ui。名前を聞いた時は「また新しいの出たのか」と思ったんですが、調べてみると出自がなかなか面白い。

Cal.comを知っている人も多いと思います。オープンソースのスケジューリングツールで、Calendlyの代替として人気がある。そのCal.comの親会社であるcoss.comが開発しているUIライブラリなんですよ。

GitHubで9,000スター以上を獲得していて、実際にCal.comのプロダクトで使われているという実績がある。これ、意外と重要なポイントだと思います。

coss.com uiとは

公式の説明では「A collection of beautifully designed, accessible, and composable components for your React apps. Built on top of Base UI」となっています。

つまり、美しくデザインされた、アクセシブルで組み合わせ可能なReactコンポーネント集。Base UIの上に構築されているのが特徴です。

Base UIはMUIチーム（元Material UI）が開発しているヘッドレスUIライブラリ。Radix UI、Floating UI、Material UIの開発者たちの知見が詰まった基盤の上に、coss.com uiが乗っかっている形ですね。

そしてshadcn/uiユーザーには馴染みやすい「コピペして使う」スタイルを採用。ライブラリとしてインポートするのではなく、コンポーネントのコードを自分のプロジェクトにコピーして、自由にカスタマイズできる設計になっています。

特徴・メリット

1. 3層アーキテクチャ

coss.com uiの面白いところは、3つのレイヤーでコンポーネントを整理している点。

Primitives（プリミティブ）: Base UIベースのアンスタイルドコンポーネント。アクセシビリティ、フォーカス管理、キーボード操作を担当。見た目は自分で決められる。

Particles（パーティクル）: プリミティブを組み合わせた実用的なコンポーネント。認証フォーム、テーブル、日付ピッカーなど、すぐに使えるレベルのもの。ある程度デザインが入っているけど、カスタマイズは可能。

Atoms（アトム）: ここが他のライブラリと違うところ。OAuth認証、カレンダー予約、決済処理といったSaaS系の処理パターンをReact Queryフックとして提供。フルスタック開発者にとってボイラープレートコードが減る。

個人的には、この3層構造がよく考えられていると感じました。必要な抽象度のレイヤーを選べる。

2. shadcn/ui経験者に馴染みやすい

公式でも「If you've used shadcn/ui, you'll feel right at home」と謳っている。違いは基盤部分で、shadcn/uiがRadix UIを使っているのに対し、coss.com uiはBase UIを使っている。

Radix UIからの移行ガイドも用意されていて、同等のRadixコンポーネントをBase UIに変換する手順が説明されています。

3. Tailwind CSS v4対応

コンポーネントはTailwind CSS v4でスタイリングされています。最新のTailwindを使いたい人には嬉しいポイント。

Cal.comのデザイントークンシステムがCSS変数として実装されていて、グローバルスタイルシートで一括カスタマイズ可能です。

4. AI対応のドキュメント

これ、地味に便利なんですよ。ドキュメントにllms.txtファイルが用意されていて、AIエージェントがコンポーネント構造を理解しやすいようになっている。各ページに「Copy Markdown」ボタンもある。

30代になって思うのは、AIツールとの相性も開発体験に影響するということ。こういう配慮は時短になる。

5. 実プロダクトで検証済み

Cal.comという実際のプロダクトで使われている。これは単なる「コンセプトライブラリ」ではなく、本番環境で動いているコードがベースになっているという安心感があります。

インストール方法

CLIを使った自動インストール

shadcn CLIを使うのが一番簡単。

npx shadcn@latest add @coss/ui

カラーシステムも一緒に入れる場合：

npx shadcn@latest add @coss/ui @coss/colors-zinc

zincベースのカラーシステムが入って、くっきりしたボーダーと視覚的な深みが出ます。

手動インストール

CLIを使いたくない場合は、5ステップで対応可能。

公式サイトでコンポーネントを選択
コードタブからソースコードをコピー
プロジェクト内にファイルを作成（例：components/ui/button.tsx）
依存パッケージをインストール
アプリケーションにインポート

この「コードを自分のプロジェクトに持ってくる」スタイル、最初は面倒に感じるかもしれませんが、カスタマイズの自由度という意味ではコスパが良い。

前提条件

React プロジェクトにTailwind CSS v4が構成されている必要があります。

基本的な使い方

Buttonコンポーネント

import { Button } from '@/components/ui/button';

export function ButtonDemo() {
  return (
    <div className="flex gap-4">
      <Button variant="default">デフォルト</Button>
      <Button variant="secondary">セカンダリ</Button>
      <Button variant="outline">アウトライン</Button>
      <Button variant="ghost">ゴースト</Button>
    </div>
  );
}

shadcn/uiを使ったことがあれば、ほぼ同じ感覚で使える。

Dialogコンポーネント

Base UIベースなので、コンポーネントがパーツに分かれている構成。

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';

export function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>設定を開く</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>アカウント設定</DialogTitle>
          <DialogDescription>
            プロフィール情報を編集できます。
          </DialogDescription>
        </DialogHeader>
        {/* ダイアログの内容 */}
      </DialogContent>
    </Dialog>
  );
}

アクセシビリティはBase UIが担保してくれるので、見た目に集中できる。

Popoverコンポーネント

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';

export function PopoverDemo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">詳細を表示</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="space-y-2">
          <h4 className="font-medium">ポップオーバー</h4>
          <p className="text-sm text-muted-foreground">
            追加情報をここに表示できます。
          </p>
        </div>
      </PopoverContent>
    </Popover>
  );
}

実践的なユースケース

SaaSアプリケーションのダッシュボード

coss.com uiが最も活きるのは、SaaS系のアプリケーション開発。

Atomsレイヤーを使えば、認証フロー、カレンダー連携、決済処理といった「よくある処理」のボイラープレートが減る。Cal.comで培われたパターンがそのまま使えるわけです。

// カレンダー予約のフック例（イメージ）
import { useScheduling } from '@coss/atoms';

export function BookingForm() {
  const { availableSlots, bookSlot, isLoading } = useScheduling({
    calendarId: 'user-calendar',
  });

  // 予約ロジックがフックに抽象化されている
}

デザインシステムの構築

Primitivesレイヤーを使えば、自社のデザインシステム構築の基盤として活用できる。

Base UIのアクセシビリティロジックはそのまま、見た目だけ自社デザインに。この分離がQOL上がりますね。

既存shadcn/uiプロジェクトからの移行

Base UIの方が好みという場合、段階的に移行できる。両方のコンポーネントを共存させながら、徐々に置き換えていく戦略が取れます。

注意点

まだ開発初期段階

公式でも「currently in early development」と明記されています。Base UI自体もベータ版なので、破壊的変更が入る可能性がある。

本番環境で使う場合は、変更に対応できる体制が必要です。

ライセンスに注意

リポジトリ全体はAGPLv3だけど、apps/origin/とapps/ui/ディレクトリはMITライセンス。使う部分によってライセンスが異なるので、確認が必要です。

shadcn/uiとの比較

「shadcn/uiとどっちがいいの？」という疑問はあると思います。

項目	coss.com ui	shadcn/ui
基盤	Base UI	Radix UI
開発元	coss.com（Cal.com）	Vercel所属の個人開発者
実績	Cal.comで使用	多数のプロジェクトで採用
成熟度	開発初期	安定版
特徴的機能	Atomsレイヤー	-