7onicDESIGN SYSTEM

CLI

v0.1.14

ソースファイルをプロジェクトにコピーしてコンポーネントを追加します。内部ロジックや構造まで直接変更できます。

初期化

7onic トークン、ベース依存、cn() ユーティリティをセットアップ

コンポーネント追加

.tsxソースファイルをプロジェクトにコピー

自動依存解決

Radix UIや内部依存を自動でインストール

TypeScript Required.tsx

TypeScriptプロジェクトが必要です（tsconfig.json）。CLIは.tsxファイルのみ出力します。

Quick Start

先に Tailwind が必要です（下の Tailwind セットアップを参照）。

Terminal
npx 7onic init
npx 7onic add button card input

Tailwind セットアップ

7onic CLI は Tailwind 自体をインストールしません。お使いの環境に合わせてコマンドを実行してから 7onic init を実行してください。

Next.js + Tailwind v4
Terminal
npm install tailwindcss @tailwindcss/postcss postcss

詳細な設定（postcss / vite / tailwind.config）が必要？ Installation ページを参照

Vite + Tailwind v4
Terminal
npm install tailwindcss @tailwindcss/vite

詳細な設定（postcss / vite / tailwind.config）が必要？ Installation ページを参照

Next.js + Tailwind v3
Terminal
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

詳細な設定（postcss / vite / tailwind.config）が必要？ Installation ページを参照

Vite + Tailwind v3
Terminal
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

詳細な設定（postcss / vite / tailwind.config）が必要？ Installation ページを参照

npx 7onic init

7onic を自動セットアップ — 環境検出、依存インストール、CSS・ユーティリティ・設定の作成

Terminal
npx 7onic init

実行内容

1

Framework (Next.js / Vite)、TypeScript、Tailwind の自動検出

2

Vite `@/` path alias 自動設定

3

基本依存のインストール (`@7onic-ui/tokens` など)

4

CSS ファイルにトークン import 追加

5

Next.js / Vite boilerplate 整理 (`.bak` バックアップ)

6

`cn()` ユーティリティおよび `7onic.json` 生成

7onic init が行わないこと

Tailwind 自体のセットアップはユーザー側で実施 — 上記 Tailwind セットアップカード参照

  • Tailwind パッケージのインストール
  • Tailwind 設定ファイルの生成 (`postcss.config`, `tailwind.config`)
  • Vite plugin 登録 (`vite.config.ts` の `tailwindcss()`)

npx 7onic add

コンポーネントのソースファイルをプロジェクトにコピーします。依存関係は自動で解決されます。

Terminal
npx 7onic add button
npx 7onic add button card input modal
npx 7onic add --all
Tailwind v4

Tailwind v4 プロジェクト（Next.js / Vite）で CLI を使用してコンポーネントを追加すると、@source ディレクティブが CSS ファイルに自動注入されます。手動設定は不要です。

Optional追加セットアップが必要なコンポーネント
toast

ルートレイアウトにToasterを追加してください

// app/layout.tsx (Next.js)
<body>
  {children}
  <Toaster />
</body>
// src/main.tsx (Vite)
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
    <Toaster />
  </StrictMode>
)
tooltip

アプリをTooltipProviderでラップしてください

// app/layout.tsx (Next.js)
<body>
  <TooltipProvider>
    {children}
  </TooltipProvider>
</body>
// src/main.tsx (Vite)
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <TooltipProvider>
      <App />
    </TooltipProvider>
  </StrictMode>
)

7onic.json

initで作成されます。コンポーネントの配置場所とTailwindの設定を制御します。

{
  "$schema": "https://7onic.design/schema/7onic.json",
  "tailwind": {
    "version": 4,
    "css": "app/globals.css"
  },
  "aliases": {
    "components": "@/components/ui",
    "utils": "@/lib/utils"
  }
}
tailwind.version
3 | 4

Tailwind CSSバージョン（3または4）

tailwind.config
tailwind.config.js

Tailwind v3設定ファイルパス（v4: 不要）

tailwind.css
Next.js: app/globals.css Vite: src/index.css

トークンインポート用のメインCSSファイル

aliases.components
@/components/ui

コンポーネントのコピー先

aliases.utils
@/lib/utils

cn()ユーティリティの場所

Available Components

npx 7onic add --allですべてのコンポーネントを一括追加できます。

チャートエイリアス: bar-chart、line-chart、area-chart、pie-chartはすべてchartに解決されます。

Dependency Resolution

コンポーネントが別のコンポーネントに依存している場合、両方が自動的にコピーされます。

add button
button+button-group
add button-group
button-group+button
add icon-button
icon-button+button+button-group
add input
input+field
add chart
chart(bar / line / area / pie)
add pie-chart
chart(alias)
add card
card

Flags

--tailwind v3|v4initのTailwindバージョンを指定（デフォルト: 自動検出）
--allすべてのコンポーネントを追加（rechartsオプトアウトプロンプト付き）
--yes, -y確認プロンプトをスキップ（デフォルト値を使用）
--overwrite既存ファイルを上書き

npm vs CLI

npm
npm install @7onic-ui/react @7onic-ui/tokens
  • ✓ セットアップ不要 — インポートしてすぐ使用
  • ✓ npmで自動アップデート
  • ✓ コンポーネントをそのまま使う場合に最適
CLI
npx 7onic add button
  • ✓ ソースコードを完全に所有
  • ✓ 内部ロジック、Props、構造を自由に変更
  • ✓ コンポーネントの動作を変更する必要がある場合に最適