Installation

7onic UIコンポーネントをプロジェクトにインストールして使う方法

Install

@7onic-ui/react

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 が必要です。インストール後、下記のImport設定を行ってください。 Get Tailwind

Import

Tailwind v4

設定ファイル不要

your-styles.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";

@source ディレクティブで、コンポーネント内のTailwindクラスをスキャン対象に追加します。パスはプロジェクト構造に合わせて調整してください。

Tailwind v3

CSS + プリセット

your-styles.css

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

@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.config.js

module.exports = {
  presets: [
    require('@7onic-ui/tokens/tailwind/v3-preset')
  ],
  content: [
    './node_modules/@7onic-ui/react/dist/**/*.{js,mjs}',
  ],
}

プリセットは theme.extend を使用するため、既存のTailwindクラスはそのまま維持されます。※ v3でもセマンティックカラーの opacity modifier（bg-primary/50 等）に対応しています。RGB チャンネル変数を使用してアルファ値を適用します。

Body StyleRecommended

body 要素に追加してください。ライト・ダークモード両方で背景色とテキスト色が正しく適用されます。

layout.html

<body class="bg-background text-foreground">

Next.js App Router: クライアントコンポーネントとして使用する場合は、ファイルの先頭に 'use client' を追加してください。

Fonts

Fonts Setup Guide

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

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

Usage

コンポーネントのインポートと使用方法。Namespace と Named の2つの方式をサポートしています。

Namespace (推奨)

推奨

namespace.tsx

import { Card, Button } from '@7onic-ui/react'

<Card>
  <Card.Header>
    <Card.Title>Project Settings</Card.Title>
    <Card.Description>Manage your project configuration.</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Content here</p>
  </Card.Content>
  <Card.Footer>
    <Button variant="outline">Cancel</Button>
    <Button>Save</Button>
  </Card.Footer>
</Card>

ルートコンポーネントのみインポートし、サブコンポーネントはドット記法でアクセスします。

Named Export (互換)

named.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>

従来の Named Export も引き続きサポートしています。既存のコードはそのまま動作します。

Standalone コンポーネント（Button, Input, Badge など）は単体インポートのみで、Namespace は不要です。

Requirements

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

Package Contents

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

@7onic-ui/react

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

index.jsCommonJS

CJS

index.mjsES Modules

ESM

index.d.tsTypeScript 型定義

Types

import { Button, Card, Modal } from '@7onic-ui/react'

@7onic-ui/tokens

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

CSS

variables, light, dark, all

Tailwind

v3-preset, v4-theme, v4

JS / Types

CJS, ESM, .d.ts, JSON

CLI

sync-tokens

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

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

Package Contents

Token Sync

デザインをカスタマイズ

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

FigmaJSONsync-tokensCSS + Components

$ npx sync-tokensToken Sync