はじめてみよう

@j-admin/ui は、管理画面向けに設計された Web Components ライブラリです。フレームワーク（React, Vue, Angular, Svelte）を問わず、HTMLのみのプレーンな環境でも動作します。

CDN から読み込む（推奨）

最も簡単な導入方法です。以下の2行を HTML に追加するだけで、すぐに使えます。

<!-- CSS（デザイントークン・スタイル） -->
<link rel="stylesheet" href="https://jellee.joydea.jp/cdn/jellee/v0.0.1/jui.css">

<!-- JS（コンポーネント本体） -->
<script type="module" src="https://jellee.joydea.jp/cdn/jellee/v0.0.1/jui.esm.js"></script>

最小構成のサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jellee デモ</title>
  <link rel="stylesheet" href="https://jellee.joydea.jp/cdn/jellee/v0.0.1/jui.css">
  <script type="module" src="https://jellee.joydea.jp/cdn/jellee/v0.0.1/jui.esm.js"></script>
</head>
<body>
  <jui-button variant="brand">ボタン</jui-button>
  <jui-alert variant="success">CDNから読み込み成功！</jui-alert>
</body>
</html>

バージョンについて

URL	用途
`.../v0.0.1/jui.esm.js`	バージョン固定（推奨） — 本番環境ではこちらを使用
`.../latest/jui.esm.js`	常に最新 — 開発中の動作確認向け

⚠️ 本番環境では必ずバージョンを固定してください。latest は予告なく更新される場合があります。

各フレームワークでの利用

Laravel (Blade)

レイアウトファイルに以下を追加します。

{{-- layouts/app.blade.php --}}
<head>
  <link rel="stylesheet" href="https://jellee.joydea.jp/cdn/jellee/v0.0.1/jui.css">
  <script type="module" src="https://jellee.joydea.jp/cdn/jellee/v0.0.1/jui.esm.js"></script>
</head>

Bladeテンプレートで直接使えます。

<jui-button variant="brand">送信</jui-button>

<jui-card card-title="{{ $item->title }}">
  <p>{{ $item->description }}</p>
</jui-card>

@foreach ($users as $user)
  <jui-avatar initials="{{ $user->initials }}"></jui-avatar>
@endforeach

Yii2

AssetBundle を作成して読み込みます。

// assets/JuiAsset.php
class JuiAsset extends AssetBundle
{
    public $css = [
        'https://jellee.joydea.jp/cdn/jellee/v0.0.1/jui.css',
    ];
    public $jsOptions = ['type' => 'module'];
    public $js = [
        'https://jellee.joydea.jp/cdn/jellee/v0.0.1/jui.esm.js',
    ];
}

<?php JuiAsset::register($this); ?>

<jui-button variant="brand">送信</jui-button>
<jui-input placeholder="名前を入力" label="名前"></jui-input>

React / Next.js

エントリーポイントでローダー関数を呼び出します。

// main.tsx または _app.tsx
import { defineCustomElements } from '@j-admin/ui/loader';
import '@j-admin/ui/dist/jui/jui.css';

defineCustomElements();

export default function App() {
  return (
    <div>
      <jui-button variant="brand">Reactで表示したボタン</jui-button>
    </div>
  );
}

テーマのカスタマイズ

CSS カスタムプロパティを上書きするだけで、プロジェクト全体のテーマを変更できます。

<style>
  :root {
    /* ブランドカラーを変更 */
    --jui-color-brand: #7c3aed;

    /* 背景色を変更 */
    --jui-color-surface: #FAFAFA;
    --jui-color-surface-raised: #FFFFFF;

    /* 角丸を変更 */
    --jui-radius-md: 12px;
  }
</style>

特定のコンポーネントだけスタイルを変えたい場合は、::part() を使います。

/* ボタンを丸くする */
jui-button::part(button) {
  border-radius: 999px;
}

/* カードの影を強くする */
jui-card::part(card) {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

次のステップ

コンポーネント一覧で利用可能な全コンポーネントを確認
各コンポーネントページで Props・Events・使用例を確認