Square UIとは｜shadcn/uiベースのUIコレクション、ライセンスは再配布禁止だった

この記事ではUIデザインに特化して解説します。デザインシステム・UI生成全般は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに完全解説 をご覧ください。

この記事は「UI生成 & デザインシステム」クラスタの1本です。全体像は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】 にまとめています。

Square UIの概要

Square UIはNext.jsとshadcn/uiで構築されたレイアウトUIコレクション。美しくデザインされたテンプレートやレイアウト集として提供されている。

初出時に「オープンソース」と書いていたが、これは誤りだった。 2026-10-10 に LICENSE.md を読み直すと「ln-dev UI License」という独自ライセンスで、作ったアプリを売ることは許される一方、コンポーネントやテンプレートそのものの再配布・公開・UIキット化は明示的に禁止されている。OSI の定義（自由な再頒布・派生物の頒布）を満たさないため、オープンソースではない。社内で使うぶんには問題ないが、フォークを公開したりテンプレート集として配り直すことはできない。

セットアップと基本的な使い方

Square UIはレイアウトテンプレート集として、GitHubリポジトリから直接テンプレートを参照・活用する形で使用できる。各テンプレートはRadix UIまたはBase UIを使用した実装が提供されており、プロジェクトの要件に応じて選択可能。提供されるテンプレートには、習慣追跡アプリケーション向けのHabit Trackerや、クリエイター向けのMarketing Dashboardなど、複数の用途別テンプレートが含まれている。

テンプレートの活用メリット

テンプレート集として活用することで、UI実装の工数削減とデザイン統一が同時に実現される。複数プロジェクト間での見た目の一貫性を保ちながら、開発期間の短縮が可能。Next.jsとshadcn/uiを基盤としているため、モダンなReact開発環境との相性も良い。

活用上の考慮点

テンプレートを独自プロジェクトに適用する際は、GitHubリポジトリのコード例を参照しながら、プロジェクト固有の要件に合わせたカスタマイズが必要となる場合がある。テンプレートの内部構造の理解度に応じて、カスタマイズの柔軟性が変わってくる。

適用対象

React を用いたUI実装でテンプレートの活用を検討するチーム、デザインシステムの構築を効率的に進めたい環境、新規プロジェクトの立ち上げ期間を短縮したい場合に有効。Square UIのテンプレート集は、こうした要件を満たすための実装リソースとして機能する。

2026-10-10 に測り直した手順

本記事の数値は、次の3コマンドをこの順に実行して得たものだ。読者が同じ手順で再確認できる。

# ① 浅く clone する（履歴50件ぶんだけ取る）
git clone --depth 50 https://github.com/ln-dev7/square-ui /tmp/square-ui

# ② 直近のコミット日を見る → 2026-09-16
git -C /tmp/square-ui log -1 --format=%ad --date=short

# ③ ライセンスの実体と規模を見る → ln-dev UI License（再配布禁止） / 1,846 ファイル
head -3 /tmp/square-ui/LICENSE* 2>/dev/null; git -C /tmp/square-ui ls-files | wc -l

③が肝心で、バッジや紹介文ではなく LICENSE ファイルの中身を読む。今回 ln-dev7/square-ui はOSI 準拠のオープンソースではなかった。

同じクラスタの関連記事

同じ「UI生成 & デザインシステム」クラスタで、実測値を本文に持っている記事を挙げておく。

・Astryxとは｜Metaのデザインシステムが「agent ready」を毎晩shadcn/uiと採点比較している
・Claude Design 使い方ガイド｜始め方・プロンプトのコツ・料金と使用量上限、Claude Codeとの違い

参照ソース

・ln-dev7/square-ui（GitHub） — 本記事が測り直した対象
・LICENSE — ライセンスの実体（上の手順③で読んだファイル）