7onicDESIGN SYSTEM

CLI

v0.1.3

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

初期化

トークン、Tailwind、cn()ユーティリティをセットアップ

コンポーネント追加

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

自動依存解決

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

TypeScript Required.tsx

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

Quick Start

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

npx 7onic init

プロジェクトで7onicを初期化します。Tailwindバージョンを検出し、基本依存をインストールし、設定を作成します。

Terminal
npx 7onic init

実行内容

1

Tailwindバージョンを検出（tailwind.config.*あり → v3、CSS設定のみ → v4）

2

パッケージマネージャーを検出（npm / pnpm / yarn / bun）

3

基本依存をインストール（@7onic-ui/tokens、clsx、tailwind-merge、cva）

4

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

5

cn()ユーティリティ関数を作成

6

7onic.json設定ファイルを作成

npx 7onic add

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

Terminal
npx 7onic add button
npx 7onic add button card input modal
npx 7onic add --all
Optional追加セットアップが必要なコンポーネント
toast

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

// app/layout.tsx
<body>
  {children}
  <Toaster />
</body>
tooltip

アプリをTooltip.Providerでラップしてください

// app/layout.tsx
<Tooltip.Provider>
  {children}
</Tooltip.Provider>

7onic.json

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

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

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

tailwind.config
tailwind.config.ts

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

tailwind.css
src/app/globals.css

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

aliases.components
@/components/ui

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

aliases.utils
@/lib/utils

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

Available Components

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

accordionalertavatarbadgebreadcrumbbuttonbutton-groupcardchartcheckboxdividerdrawerdropdownicon-buttoninputmetric-cardmodalnavigation-menupaginationpopoverprogressradio-groupsegmentedselectskeletonsliderspinnerswitchtabletabstextareatoasttoggletoggle-grouptooltip

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