@spikestudio-jp/uikit

shadcn/ui + Tailwind CSS v4 ベースの UI コンポーネントライブラリ。

Storybook（コンポーネントカタログ）: https://spikestudio.github.io/uikit/

インストール

npm registry で公開されています。認証不要でインストールできます。

pnpm add @spikestudio-jp/uikit

バージョンを固定したい場合:

pnpm add @spikestudio-jp/[email protected]

利用可能なバージョンは Releases で確認してください。

セットアップ（Next.js）

1. グローバル CSS をインポート

globals.css（またはアプリのエントリ CSS）に追加します。

@import "@spikestudio-jp/uikit/globals.css";

2. Tailwind v4 の設定

globals.css に @source ディレクティブを追加して、uikit のクラスをスキャン対象に含めます。

@import "@spikestudio-jp/uikit/globals.css";

@source "../node_modules/@spikestudio-jp/uikit/dist";

3. コンポーネントを使う

import { Button } from "@spikestudio-jp/uikit/components/ui/button"
import { DataTable } from "@spikestudio-jp/uikit/components/composites/data-table"
import { SidebarLayout } from "@spikestudio-jp/uikit/components/layouts/sidebar-layout"

テーマカスタマイズ

テーマは CSS 変数で制御します。globals.css でデフォルト値を上書きできます。

@import "@spikestudio-jp/uikit/globals.css";

:root {
  --primary: oklch(0.5 0.2 240);        /* カラーテーマ */
  --radius: 0.75rem;                     /* 角丸 */
  --component-height: 2.25rem;           /* コンポーネント高さ */
}

プリセットテーマを使う場合:

@import "@spikestudio-jp/uikit/themes/blue.css";     /* blue / indigo / green / rose / amber */
@import "@spikestudio-jp/uikit/themes/radius-rounded.css"; /* sharp / default / rounded / pill */

コンポーネント一覧

UI（プリミティブ）

shadcn/ui ベースの基本コンポーネント群です。

| コンポーネント | インポートパス | |---|---| | Button | @spikestudio-jp/uikit/components/ui/button | | Input | @spikestudio-jp/uikit/components/ui/input | | Select | @spikestudio-jp/uikit/components/ui/select | | Dialog | @spikestudio-jp/uikit/components/ui/dialog | | Sheet | @spikestudio-jp/uikit/components/ui/sheet | | Tabs | @spikestudio-jp/uikit/components/ui/tabs | | Table | @spikestudio-jp/uikit/components/ui/table | | Badge | @spikestudio-jp/uikit/components/ui/badge | | Card | @spikestudio-jp/uikit/components/ui/card | | Form | @spikestudio-jp/uikit/components/ui/form | | Sidebar | @spikestudio-jp/uikit/components/ui/sidebar | | Stepper | @spikestudio-jp/uikit/components/ui/stepper | | Chart | @spikestudio-jp/uikit/components/ui/chart | | Calendar | @spikestudio-jp/uikit/components/ui/calendar | | その他 50+ | Storybook で確認 |

Composites（複合コンポーネント）

| コンポーネント | インポートパス | 概要 | |---|---|---| | DataTable | …/composites/data-table | ソート・フィルタ・ページネーション付きテーブル | | DataGrid | …/composites/data-grid | インライン編集対応グリッド | | Kanban | …/composites/kanban | ドラッグ＆ドロップ対応カンバン | | Gantt | …/composites/gantt | ガントチャート | | Editor | …/composites/editor | Tiptap ベースのリッチテキストエディタ | | CodeBlock | …/composites/code-block | Shiki ベースのコードハイライト | | Tags | …/composites/tags | タグ入力・表示 | | Tree | …/composites/tree | ツリービュー | | MiniCalendar | …/composites/mini-calendar | ミニカレンダー | | FilterBar | …/composites/filter-bar | フィルターバー | | SearchBar | …/composites/search-bar | 検索バー | | Pagination | …/composites/pagination | ページネーション | | ConfirmDialog | …/composites/confirm-dialog | 確認ダイアログ | | CommentThread | …/composites/comment-thread | コメントスレッド | | その他 | Storybook で確認 | |

Layouts

| コンポーネント | インポートパス | 概要 | |---|---|---| | SidebarLayout | …/layouts/sidebar-layout | サイドバーナビ付きレイアウト | | TopnavLayout | …/layouts/topnav-layout | トップナビ付きレイアウト | | TopnavSidebarLayout | …/layouts/topnav-sidebar-layout | トップナビ＋サイドバー複合 |

Pages（ページテンプレート）

| コンポーネント | インポートパス | |---|---| | ListPage | …/pages/list-page | | DetailPage | …/pages/detail-page | | FormPage | …/pages/form-page | | DashboardPage | …/pages/dashboard-page | | WizardPage | …/pages/wizard-page |

ユーティリティ

import { cn } from "@spikestudio-jp/uikit/lib/utils"
import { useIsMobile } from "@spikestudio-jp/uikit/hooks/use-mobile"
import { useDarkMode } from "@spikestudio-jp/uikit/hooks/use-dark-mode"

CI/CD での利用

npmjs.com で公開されているため、追加の認証設定は不要です。通常の pnpm add でインストールできます。

開発

pnpm install
pnpm storybook                  # Storybook 起動（http://localhost:6006）
pnpm build                      # ライブラリビルド
pnpm test                       # テスト実行
pnpm catalog:generate           # catalog.json 再生成

リリース

git tag を push すると GitHub Actions が自動でビルドし、npmjs.com に publish します。

git tag v0.x.y
git push origin v0.x.y

前提: GitHub リポジトリに NPM_TOKEN シークレットの設定が必要です。

Actions の実行状況: spikestudio/uikit/actions