7onicDESIGN SYSTEM

Installation

npmパッケージでインストールすれば、propsやトークンで自由に変更できます。npm updateで最新版もすぐ反映されます。

Install

@7onic-ui/reactv0.3.6
Terminal
# npm
npm install @7onic-ui/react @7onic-ui/tokens

# yarn
yarn add @7onic-ui/react @7onic-ui/tokens

# pnpm
pnpm add @7onic-ui/react @7onic-ui/tokens
Tailwind必須: Tailwind v3 または v4 が必要です。下の Setup セクションから自分の環境を選んでください。

Setup

下記の順序で環境に合わせてセットアップしてください。

Tailwind が既にセットアップ済みの場合、Edit CSS の step のみ (v3 は tailwind.config も merge)

Vite + Tailwind v4

Step 1. Tailwind パッケージをインストール

Terminal
npm install tailwindcss @tailwindcss/vite

Step 2. 既存の vite.config.ts に import 1 行と plugins 項目 1 つを追加してください (ファイル全体を上書きしない)。

vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite' // ← add this line

export default defineConfig({
  plugins: [react(), tailwindcss()], // ← add tailwindcss()
})

Step 3. Vite のデフォルトスタイル (デモ用) は UI ライブラリと干渉する場合があります。カスタマイズがなければ、以下の例示ブロックを整理してください。

src/index.css— 削除対象ブロック一覧を表示
src/index.css
:root {
  font: 18px/145% system-ui, sans-serif;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark color tokens */
  }
}

#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
}

h1, h2 {
  font-family: system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-h);
}

/* + h1, h2 (size), p, code etc. — delete every other element/universal rule */

Step 4. 下記の import を CSS ファイルに追加

src/index.css
@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";
個別インポート
@import "tailwindcss";
@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';
@import '@7onic-ui/tokens/tailwind/v4-theme.css';

@source "../node_modules/@7onic-ui/react/dist";
Next.js + Tailwind v4

Step 1. Tailwind パッケージをインストール

Terminal
npm install tailwindcss @tailwindcss/postcss postcss

Step 2. package.json と同じフォルダに postcss.config.mjs を新規作成し、以下を貼り付け

postcss.config.mjs
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Step 3. 下記の import を CSS ファイルに追加

app/globals.css
@import "tailwindcss";
@import '@7onic-ui/tokens/tailwind/v4.css';

@source "../node_modules/@7onic-ui/react/dist";
個別インポート
@import "tailwindcss";
@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';
@import '@7onic-ui/tokens/tailwind/v4-theme.css';

@source "../node_modules/@7onic-ui/react/dist";

Tips. 既存のスタイルが上書きされたりレンダリングが崩れる場合、競合する element/universal rule を `@layer base { ... }` で囲んでください。

app/globals.css— 例を表示
app/globals.css
@layer base {
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
}
Vite + Tailwind v3

Step 1. Tailwind v3 と関連パッケージをインストールし、init -p で設定ファイルを自動生成

Terminal
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Step 2. tailwind.config.js に 7onic preset と content paths を追加してください。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset'),
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
  ],
}

Step 3. Vite のデフォルトスタイル (デモ用) は UI ライブラリと干渉する場合があります。カスタマイズがなければ、以下の例示ブロックを整理してください。

src/index.css— 削除対象ブロック一覧を表示
src/index.css
:root {
  font: 18px/145% system-ui, sans-serif;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* dark color tokens */
  }
}

#root {
  width: 1126px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
}

h1, h2 {
  font-family: system-ui, sans-serif;
  font-weight: 500;
  color: var(--text-h);
}

/* + h1, h2 (size), p, code etc. — delete every other element/universal rule */

Step 4. 下記の import を CSS ファイルに追加

src/index.css
@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
個別インポート
@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
Next.js + Tailwind v3

Step 1. Tailwind v3 と関連パッケージをインストールし、init -p で設定ファイルを自動生成

Terminal
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p

Step 2. tailwind.config.js に 7onic preset と content paths を追加してください。

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset'),
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/**/*.{js,ts,jsx,tsx,mdx}',
  ],
}

Step 3. 下記の import を CSS ファイルに追加

app/globals.css
@import '@7onic-ui/tokens/css/all.css';

@tailwind base;
@tailwind components;
@tailwind utilities;
個別インポート
@import '@7onic-ui/tokens/css/variables.css';
@import '@7onic-ui/tokens/css/themes/light.css';
@import '@7onic-ui/tokens/css/themes/dark.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

公式ドキュメント: tailwindcss.com

Fonts

Aa

Fonts Setup Guide

フォントのインストールと多言語設定

コンポーネントはトークンの font-sans を使用します。Design Tokens > Installation > Fonts で設定できます。

Usage

Import & Usage

example.tsx
import {
  Card, CardHeader, CardTitle, CardDescription,
  CardContent, CardFooter, Button,
} from '@7onic-ui/react'

<Card>
  <CardHeader>
    <CardTitle>Project Settings</CardTitle>
    <CardDescription>Manage your project configuration.</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Content here</p>
  </CardContent>
  <CardFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>

Requirements

パッケージバージョン
react≥ 18.0.0
react-dom≥ 18.0.0
tailwindcssv3 or v4
@7onic-ui/tokens必須（同時インストール）

Package Contents

2つのパッケージで構成されています。コンポーネントとトークンを別々に管理できます。

@7onic-ui/react

UIコンポーネントライブラリ — dist/ 配布

index.js / .mjs / .d.ts
Main
chart.js / .mjs / .d.ts
Chart
llms.txt
AI
import { Button, Card, Modal } from '@7onic-ui/react'import { Chart } from '@7onic-ui/react/chart'
@7onic-ui/tokens

デザイントークン — CSS変数・Tailwindプリセット・JS・CLI・AI

CSS

4

variables, light, dark, all

Tailwind

3

v3-preset, v4-theme, v4

JS / Types

4

CJS, ESM, .d.ts, JSON

CLI / AI

2

sync-tokens, llms.txt

figma-tokens.jsonSSOT→ npx sync-tokens で全ファイル自動生成

figma-tokens.json → npx sync-tokens で全ファイル自動生成

Package Contents

Token Sync

デザインをカスタマイズ

トークンを変更するとコンポーネントのスタイルに自動反映

FigmaJSONsync-tokensCSS + Components
$ npx sync-tokensToken Sync