管理画面を一から組んだことがある人なら、あの徒労を知っているはずです。サイドバー、データテーブル、フィルタ、チャート、空状態、ダークモード——どのプロジェクトでも同じものを、少しずつ違う形で作り直す。Square UI（zerostaticthemes/square-ui・GitHubスター5,976）は、その「毎回作り直す層」を20種類の完成レイアウトとして配っているプロジェクトです。
ただ、この記事の主題は「便利なテンプレ集の紹介」ではありません。調べていて手が止まった事実が2つあります。1つ目は、このプロジェクトが2026年4月8日にMITライセンスをやめ、再配布を禁止する独自ライセンスに切り替えていたこと。にもかかわらず、READMEとGitHubの説明文には今も「open-source」と書かれたままです。2つ目は、目玉である「AIチャット」テンプレートに、LLMが1行も入っていないこと。どちらも批判ではなく、使う前に知っておくべき事実です。本記事は20個のデモを実機で全部触った記録と合わせて、この2点を一次ソースから整理します。
まずは、そのAIチャットのデモを実際に触った様子から。プロンプトを打ち込んで送信するまでを録画したものです。
- ・課題：管理画面の「サイドバー＋テーブル＋チャート＋ダークモード」を、プロジェクトのたびに作り直している。
- ・解決：shadcn/ui＋Next.jsで組まれた完成レイアウト20種を、コードごとコピーして自分のアプリの土台にできる。
- ・正体：コンポーネントライブラリではなくレイアウト集。npm installする依存ではなく、コードを自分のリポジトリに取り込んで改造する前提。
- ・ライセンス：2026年4月8日にMIT→独自ライセンス。自分のアプリに組み込んで売るのは自由／テンプレ集として再配布するのは禁止。オープンソースの定義は満たさない（＝ソースアベイラブル）。
- ・AIチャットの中身：LLM非搭載。依存にai/openai系は0個、返答はmock-dataの定型文。UIの殻だけを手に入れるもの。
- ・判定：368コミット中360が1人＝バス係数1。ただしコピーして使う性質上、上流停止のリスクは軽い。
なお、レイアウトやトークンといった土台の考え方そのものを整理したい場合は、デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】を先に読むと、本記事の位置づけが掴みやすくなります。
Square UIとは——「コンポーネント」ではなく「レイアウト」を配る
最初に、よくある誤解を潰しておきます。Square UIはshadcn/uiの代替ではありません。むしろshadcn/uiの上に載るものです。
「shadcn ui レイアウト」で検索して辿り着く人が多いはずですが、両者の役割は明確に違います。shadcn/ui本体が配っているのは、ボタン・ダイアログ・テーブルといった部品です。一方Square UIが配るのは、その部品を組み上げた画面まるごと——サイドバーがあり、ヘッダーがあり、統計カードが並び、チャートが描かれ、フィルタ付きのデータテーブルが載った、動く1画面です。公式の言葉でも「layouts」であり「components」ではありません。
技術スタックは素直で、執筆時点でかなり新しい構成です。
| 項目 | 内容 |
|---|---|
| フレームワーク | Next.js 16.2.6 |
| UI | React 19.2.3 / shadcn/ui |
| スタイル | Tailwind CSS |
| 言語 | TypeScript |
| 状態管理 | zustand（テンプレートによる） |
| UIプリミティブ | Radix UI版（templates/）と Base UI版（templates-baseui/）の2系統 |
最後の行が地味に効いています。shadcn/uiは土台のヘッドレスUIライブラリをRadix UIからBase UIへ移行しつつありますが、Square UIは20テンプレートすべてを両方の系統で用意しています。Base UI版のpackage.jsonを確認すると、Radix由来のパッケージが0個になり@base-ui/reactへ置き換わっていました。この移植は2026年6月14日に集中実施されており、リポジトリの142件のIssue（全てクローズ済み）の直近は「Port the tasks template to Base UI」といった移植タスクが並びます。自分のプロジェクトがどちらのプリミティブを使っていても、そのまま持ち込めるということです。
誰が作っているのか
リポジトリはzerostaticthemes組織の配下にありますが、実体はLeonel Ngoya氏（@ln_dev7）個人のプロジェクトと考えるのが正確です。README内のリンクは今もln-dev7/square-uiを指しており、旧URLは現在の組織へリダイレクトされます。ライセンス本文の著作権表記も「lndev」です。デモサイトのドメインもsquare.lndev.meで、zerostatic色はほぼありません。
デザインは複数人が担当しています。READMEのテーブルには、テンプレートごとにLN（作者本人）、Augustas（@AugustasDesign）、Rico（@_heyrico）というクレジットが明記されています。ダッシュボード群のデザインの質が高いのは、この分業のおかげでしょう。
またREADMEは、有料製品であるSquare UI Pro（pro.lndevui.com）とlndev/ui（ui.lndev.me）を「スポンサー」として掲げています。無料版が有料版への導線になっている構造で、後述するライセンス変更の背景を理解する上でも押さえておきたい点です。
20個のデモを全部触ってみた
ここからが本題です。Square UIの価値は文章で説明しても伝わりません。20テンプレートすべてに公式のライブデモがあり、全て稼働していることを確認しました（2026年7月17日時点、全URLがHTTP 200を返す）。以下、編集部が実際にブラウザで操作して録画したものを中心に並べます。
習慣トラッカー（Habit Tracker）——実際にチェックを入れてみる
このテンプレートが一番「動いている感」が伝わります。各習慣の丸いボタンを押すと、上部のカウンタが 0/6 から増え、チェックが色付きで塗られ、習慣名に取り消し線が入り、サイドバーの表示も同時に変わります。GitHubのcontribution grid風のヒートマップと、30日スパークライン、ストリーク（連続日数）まで作り込まれています。
0/6 → 3/6 へ。ヒートマップ・ストリーク・スパークラインが一画面に同居する。デザインは作者LN本人。地図（Maps）——カテゴリで絞り込む
カテゴリチップ（Restaurants / Cafés / Parks…）を押すと、リストとマーカーが連動して絞り込まれます。地図は実際のタイルを読み込んでおり、静止画のハリボテではありません。
ファイル管理（Files）——ダークモードの作り込みを見る
Square UIの各テンプレートには例外なくテーマトグルが付いています。ライト／ダークを往復させると、チャートの配色やボーダーのコントラストまで両モードで破綻なく設計されているのが分かります。この「両モードで成立させる」部分は自作すると地味に消耗するところで、テンプレートを使う実利が最も出ます。
メールクライアント（Emails）——画面遷移の密度
受信トレイ、フォルダ、詳細ペイン、作成モーダルまで揃っています。「Inbox 20」のようなバッジ、Sent/Drafts/Archive/Spam の切り替えなど、実務のメールUIに必要な要素が一通り置かれています。
ダッシュボード6種——ここが層の厚いところ
Square UIで最も数が多いのがダッシュボード系です。同じ「ダッシュボード」でも、CRM・HR・リード管理・タスク・クリエイター向け分析と、想定業務がそれぞれ違います。Dashboard 4とDashboard 5はデフォルトがダークテーマで、見た目の振れ幅も確保されています。
ここで1つ気づいたことがあります。サイドバーに「AI Assistant」「Ask AI」「Taskplus AI」といった項目が、複数のテンプレートに標準で置かれているのです。Dashboard 1、Dashboard 2、Dashboard 4、Dashboard 5、Leadsなどに確認できます。2026年の管理画面デザインでは「AI窓口をどこに置くか」が既定のパーツになりつつある、という設計思想の表れと読めます。もっとも、これらも後述の通り見た目だけです。
業務系4種——Leads / Employees / Payrolls / Rentals
Rentalsは特に密度が高く、地図・物件カード・価格レンジスライダー・部屋数フィルタ・お気に入り・グリッド／リスト切り替えが1画面に載っています。Airbnb的な検索UIを作る土台としてはかなり近道になるはずです。
生産性系4種——Calendar / Projects Timeline / Task Management / Bookmarks
このほか、READMEにはCircle（Linear風のプロジェクト管理UI）が21番目として載っていますが、これはln-dev7/circleという別リポジトリで、本体には含まれません。デモはcircle.lndev.meにあります。
テンプレート一覧（20種）
| テンプレート | 内容 | デザイン |
|---|---|---|
| Chat | AIチャットUI（会話履歴・モデル選択） | Rico |
| Habit Tracker | 習慣管理（ストリーク・ヒートマップ・統計） | LN |
| Marketing Dashboard | クリエイター向け（キャンペーン・分析） | Augustas |
| Dashboard 1 | 統計・チャート・人物テーブル・最近の文書 | Augustas |
| Dashboard 2 | CRM（売上・リード獲得元・案件テーブル） | Rico |
| Dashboard 3 | HR（財務フロー・従業員リスト・レイアウト調整） | Rico |
| Dashboard 4 | リード管理（複線チャート・トップ営業） | Augustas |
| Dashboard 5 | タスク・パフォーマンス・プロジェクト表 | LN |
| Rentals | 不動産検索（地図・フィルタ・物件一覧） | LN |
| Maps | 地図（検索・お気に入り・履歴） | LN |
| Files | ファイル管理（フォルダ・ストレージ・グリッド／リスト） | LN |
| Bookmarks | ブックマーク（コレクション・タグ・アーカイブ） | LN |
| Leads | リード管理（統計・チャート・フィルタ付きテーブル） | Rico |
| Employees | 従業員管理（入退社チャート・データテーブル） | Rico |
| Payrolls | 給与管理（経費チャート・フィルタ） | Rico |
| Tasks | タスク管理（統計・チャート・カンバン） | Rico |
| Projects Timeline | プロジェクト進行のタイムライン | Rico |
| Calendar | カレンダー（週表示・イベント管理） | Rico |
| Emails | メールクライアント（受信箱・フォルダ・詳細） | Rico |
| Task Management | シンプルなボード | Rico |
「AIチャット」テンプレートの中身——LLMは入っていない
Square UIをAI文脈で語るなら、この節が核心です。結論から言うと、chatテンプレートにLLMは接続されていません。
これは推測ではありません。templates/chat/package.jsonを確認したところ、依存関係は20個。その中にai、@ai-sdk/react、openai、@anthropic-ai/sdkといったLLM関連パッケージは1つも含まれていませんでした。あるのは状態管理のzustandと、mock-data/chats.tsという2,067バイトの固定データだけです。
実際に確かめてみました。冒頭のデモGIFで「Summarize the Q3 marketing report」と打ち込んでいますが、返ってきたのは次の定型文です。
Hello! I’m Square AI, your intelligent assistant. I’m here to help you with anything you need. How can I assist you today?
質問の内容をまったく見ていません。何を送っても同じ挨拶が返ります。同様に、Tasksテンプレートの「AI Assistant」ボタンも、開くのはUIパネルだけです。
誤解しないでほしいのは、これが欠陥ではないという点です。 UIテンプレートとしてはむしろ正しい設計で、特定のLLMプロバイダに縛られないほうが使い回しが効きます。問題は期待値のズレです。「AIチャット」という言葉から動くチャットボットを想像して手を出すと、確実に肩透かしを食らいます。
正確に言えば、Square UIのchatテンプレートで手に入るのは次のものです。
・会話の空状態から会話ビューへの遷移
・メッセージの吹き出し・送信中の表現
・会話履歴のサイドバー（Recent / Archived）
・モデルセレクタ、Deep Search・Thinkのようなモード切り替えUI
・「Square AI can make mistakes.」のような免責表示の置き場所
・プロンプトライブラリ・フォルダといった周辺画面
つまり「AIチャットUIの外側」一式です。ChatGPTやClaudeのUIを見て「あの感じ」を自分のプロダクトで再現したいとき、その殻を手に入れる用途としては合理的です。中身のLLM連携は、Vercel AI SDKなり各社SDKなりで自分で書くことになります。
2026年4月8日、MITが終わっていた
ここからが、本記事で最も伝えたい事実です。
GitHubのAPIでこのリポジトリのライセンスを引くと、"license": {"key": "other", "spdx_id": "NOASSERTION"} が返ります。GitHubがライセンスを識別できていないという意味です。MITやApache-2.0であればそう表示されるはずなので、これは違和感のあるシグナルでした。
LICENSE.mdの変更履歴を辿ると、3件のコミットがありました。
| 日付 | 内容 |
|---|---|
| 2025-03-29 | first commit（MIT License） |
| 2025-03-30 | change square to square ui |
| 2026-04-08 | feat: update LICENSE.md and add LicensePage component（MIT → ln-dev UI License） |
3件目のコミット922f707の差分が決定的です。
-MIT License
-Copyright (c) 2025 lndev-ui | Square UI
+ln-dev UI License
+Copyright (c) 2026 lndev
MITの全文が削除され、独自ライセンスに置き換わっていました。コミットメッセージは「update LICENSE.md and add LicensePage component for improved lic…」——ライセンスの根本的な変更が、UIコンポーネント追加と同じコミットに同居し、メッセージ上は「update」とだけ書かれています。意図的に隠したという証拠は何もありませんが、結果として気づきにくい変更になっています。
そして重要なのが、READMEとGitHubのリポジトリ説明文は今も「open-source」のままという点です。
・GitHubリポジトリ説明：「Collection of beautifully crafted open-source layouts UI built with shadcn/ui.」
・README冒頭：「Collection of beautifully crafted open-source layouts UI built with Next.js and shadcn/ui.」
・各デモのサイドバー内にも「Open-source layouts by lndev-ui」というカードが表示される
デモを触っていると、この「Open-source」表記が画面の隅に何度も出てきます。本記事のGIFやスクリーンショットにも写り込んでいるので、探してみてください。ライセンス本文が再配布を禁じている以上、この表記は現状では実態と食い違っています。作者を責めたいわけではなく——リブランドの過程で更新漏れが起きるのはよくあることです——ただ、READMEの「open-source」を信じて意思決定すると事故る、という一点だけは指摘しておく必要があります。
この件は特別な調査能力を要しません。リポジトリの
LICENSE.mdを自分の目で開けば済みます。READMEやバッジの表記ではなく、必ずライセンス本文を読む——今回の教訓を一般化すると、それだけです。GitHub API（gh api repos/OWNER/REPO --jq .license）で NOASSERTION が返るリポジトリは、その時点で一度立ち止まる価値があります。何が許され、何が禁じられるのか
ここは正確さが全てなので、ライセンス本文に沿って整理します。よくある誤読は「独自ライセンス＝商用利用不可」ですが、これは間違いです。 現行ライセンスが制限するのは利用ではなく再配布です。
| できること（明示的に許可） | できないこと（明示的に禁止） |
|---|---|
| 個人・商用を問わず無制限のプロジェクトで使う | テンプレートを単体リソースとして再配布・共有・公開する |
| 改変して派生物を作る | これを土台にUIキット／コンポーネントライブラリ／テンプレート集／デザインシステムを作って配る |
| SaaS・Webサイト・受託案件で使う | リポジトリ・マーケットプレイス・Webサイトで利用可能にする（無料・有料を問わず） |
| テンプレートを使って作った最終成果物を販売する | 「他人がこれを使って作れるようにする」ことが主目的の製品を作る |
| ln-dev UI / Square UI と競合する形で利用する |
ライセンスは「End Product（最終成果物）」を、テンプレートが組み込まれており、かつ再配布される主たる価値ではない最終的なアプリ・Webサイト・ソフトウェア、と定義しています。
判断に迷ったら、次の分岐で考えるのが早いはずです。
使いたい"] --> B{"配るのは
何か？"} B -->|"自分のアプリ・製品
（テンプレは中に埋まる）"| C{"それは
ln-dev UI / Square UI
と競合するか？"} B -->|"テンプレ・UIキット
そのもの"| D["禁止
（再配布に該当）"] C -->|"いいえ"| E["OK
商用・SaaS・受託・販売とも可"] C -->|"はい（UIキット商売等）"| D D --> F["有料版の利用や
他の選択肢を検討"] E --> G["改変も自由
クレジット表記の義務規定は無し"]
要するに、「作ったアプリを売る」のは自由、「テンプレを配る」のは不可です。受託でクライアントのために管理画面を作って納品する——これは許可されている「client projects」に該当します。一方、社内向けに「共通UIキット」として切り出して配る行為は、文言上は「UIキットの作成・配布」に触れる可能性があります。この辺りは実務でグレーになりやすいので、疑わしければ有料版（Square UI Pro）の条件を確認するか、法務に相談してください。
オープンソースの定義との関係
念のため、用語を正確にしておきます。Open Source Initiative の The Open Source Definition (OSD) は、第1項で自由な再頒布を、第6項で利用分野による差別の禁止を求めています。現行のln-dev UI Licenseは再配布を禁じ、さらに「ln-dev UI や Square UI と競合する利用」を禁じています。したがってOSDの定義は満たしません。
コードは公開されているので、正しい呼び方はソースアベイラブル（source-available）です。BSLやSSPLと同系統の位置づけと考えると理解しやすいでしょう。本記事がタイトルと本文で「OSS」という語を避けているのは、この理由によります。
既にフォークした人はどうなるのか
一般に、いったんMITで公開されたその時点のバージョンについては、後から一方的に許諾を取り消すことはできないと解されています。つまり2026年4月8日より前に取得したスナップショットには、当時のMITの条件が及ぶという整理が一般的です。現在658のフォークが存在しますが、それが4月8日の前か後かで扱いが変わり得ます。
ただし、これは法的助言ではありません。実務では「いつのコミットを取得したか」を証跡として示せるかが問題になります。判断に影響する場面では、必ず自社の法務や弁護士に確認してください。
なお現行ライセンスの「リポジトリで利用可能にしてはならない」という条項は、文字通りに読むとGitHubでのフォーク行為と緊張関係にあります。この点について公式の説明は見つけられませんでした。
Square UIと既存の選択肢を比べる
Square UIだけを見ても判断できないので、「shadcn/ui テンプレート」として検討されがちな近い選択肢と並べます。優劣ではなく性格の違いとして読んでください。
| Square UI | shadcn/ui（本体） | Tailwind Plus | 一般的な管理画面テンプレ（有料） | |
|---|---|---|---|---|
| 配るもの | 完成レイアウト20種 | 部品（Button/Table等） | 部品＋一部ブロック | 完成レイアウト |
| ライセンス | ln-dev UI License（ソースアベイラブル） | MIT | 商用（買い切り） | 商用（買い切り／サブスク） |
| 費用 | 無料 | 無料 | 有料 | 有料 |
| 再配布 | 不可 | 可（MIT） | 不可 | 不可 |
| 商用利用 | 可 | 可 | 可 | 可 |
| 導入方式 | リポジトリからコードをコピー | CLIでadd |
コードをコピー | ダウンロード |
| 土台 | shadcn/ui（Radix / Base UI 両対応） | Radix / Base UI | Headless UI | 製品による |
読み取れる立ち位置ははっきりしています。Square UIは「無料だがMITではない」という、やや特異な場所にいます。shadcn/ui本体のMITの自由さは無い一方、有料テンプレートの費用も無い。ライセンス変更後の実質的な性格は、「有料テンプレートと同等の制約を、無料で提供しているもの」に近づきました。
この観点で見ると、2026年4月の変更は理解しやすくなります。作者は有料版のSquare UI Proとlndev/uiを運営しています。MITのままでは、無料版のテンプレートを誰かがそのまま再パッケージして売ることを止められません。再配布禁止の条項——特に「競合利用の禁止」——は、自社の有料製品を守るための線引きとして読むのが自然でしょう。是非はさておき、動機としては筋が通っています。
Square UIの導入手順
Square UIはnpmパッケージではありません。リポジトリから欲しいテンプレートのディレクトリを取り出して、自分のコードとして扱うのが基本です。「Next.js 管理画面 テンプレート」を探して辿り着いた人ほど、この点は最初に押さえておいてください。
# リポジトリを取得
git clone https://github.com/zerostaticthemes/square-ui.git
cd square-ui
# 使いたいテンプレートへ移動（Radix UI版）
cd templates/chat
# Base UI版を使うなら: cd templates-baseui/chat
# 依存をインストールして起動
pnpm install
pnpm dev
http://localhost:3000 で対象テンプレートが立ち上がります。あとはcomponents/以下を自分の要件に合わせて改造していく流れです。テンプレートはそれぞれ独立したNext.jsアプリとして完結しているので、まるごと土台にすることも、必要な画面だけ自分のプロジェクトへ移植することもできます。
clone した時点の
LICENSE.md を必ず読み、どのコミットを取得したかを記録しておいてください（git rev-parse HEAD）。ライセンスは過去に一度変更されています。将来また変わる可能性を踏まえると、「いつ時点の、どの条件のコードを取り込んだか」を残しておくことが自衛になります。使えるか判定
導入判断に必要な材料を、実測値で並べます。
| 判定軸 | 実測 | 評価 |
|---|---|---|
| スター | 5,976 | 十分な注目度 |
| フォーク | 658 | 実際に使われている |
| 初コミット | 2025-03-25 | 約1年4か月 |
| 最終push | 2026-06-14 | 約1か月前。活発 |
| Issue | 142件（全てクローズ） | 管理されている |
| コントリビューター | ln-dev7 360 / dependabot 5 / 外部 2 / vercel 1 | バス係数1（約98%が1人） |
| ライセンス | ln-dev UI License | 要確認（OSSではない） |
| 依存の新しさ | Next.js 16.2.6 / React 19.2.3 | 執筆時点で最新級 |
| 企業サポート | 無し（個人＋有料版） | — |
バス係数1は通常なら赤信号ですが、この種類のプロジェクトでは意味が違います。 テンプレート集は「コピーして自分のものにする」使い方が前提です。上流の開発が止まっても、手元にコピーしたコードは動き続けます。ランタイムやライブラリのように「保守が止まると自分のアプリが止まる」依存ではありません。実際に依存するのはNext.js・React・shadcn/uiであり、そちらの体制のほうが遥かに重要です。
したがって、このプロジェクトで本当に注意すべきはバス係数ではなく、ライセンスが将来また変わり得ることのほうです。過去に一度変わっている以上、可能性はゼロではありません。取得時点のコミットを記録する意味はここにあります。
誰に向くか、向かないか
向いている人
・shadcn/ui＋Next.jsで管理画面やダッシュボードを作る予定があり、土台を短縮したい
・AIチャットUIの「殻」が欲しい（中身のLLM連携は自分で書くつもりがある）
・自社プロダクトや受託案件に組み込む用途で、再配布はしない
・Base UIへの移行を見据えていて、両系統のコードを比較したい
・完成度の高いダークモード実装を参考にしたい
向いていない人
・OSSであること自体が要件の組織（OSDを満たさないため、社内のOSSポリシーに抵触する可能性がある）
・社内共通のUIキットやデザインシステムとして再配布したい（ライセンス上の禁止事項に該当し得る）
・UIテンプレート・テーマ販売など、ln-dev UI / Square UI と競合する事業
・すぐ動くAIチャットボットが欲しい（LLMは入っていない）
・Next.js以外のフレームワークを使っている（全テンプレートがNext.js前提）
まとめ
Square UIは、モノとしてはよくできています。20種類のレイアウトはどれも作り込みが深く、ダークモードも破綻せず、Next.js 16 / React 19という最新の構成で、Radix UI版とBase UI版の両方が揃っている。デモは20個すべてが今も動いています。管理画面の土台としての実用性は高い。
ただし、「open-source」という言葉を信じて使い始めるべきではありません。実態は2026年4月8日以降、再配布を禁じるソースアベイラブルなライセンスです。そして繰り返しますが、これは使えないという意味ではありません。自分のアプリに組み込んで商用で売ることは明示的に許可されています。禁じられているのは、テンプレートそれ自体を配り直すことです。
この線引きさえ理解していれば、Square UIは十分に使える選択肢です。逆にこの線引きを知らないまま「MITのOSSだから自由に扱える」と考えて社内UIキットに仕立てると、後で困ります。READMEではなくLICENSEを読む——結局のところ、この記事の実務的な教訓はその一点に尽きます。
参照ソース
・zerostaticthemes/square-ui（公式リポジトリ） — スター数・フォーク数・コミット履歴・コントリビューター構成の実測値はすべてGitHub APIより2026年7月17日時点で取得
・LICENSE.md（ln-dev UI License 現行版） — 許諾・禁止事項の記述はこの本文に準拠
・コミット 922f707（MIT → ln-dev UI License） — 2026-04-08のライセンス変更差分
・Square UI 公式デモサイト — 各テンプレートのライブデモ
・shadcn/ui 公式サイト — 比較表のライセンス・提供物の記述
・The Open Source Definition（Open Source Initiative） — OSD第1項（自由な再頒布）・第6項（利用分野の差別禁止）
