jp-ui

Base UI をベースに構築したUIコンポーネントライブラリです。日本語圏での利用を前提に、和文向けのコンポーネント、日本語組版を補助するテキストスタイル、一貫した色彩設計を提供します。

特長

• Base UIの体験を保ったラッパーコンポーネント
• 日本語組版を補助するテキストスタイル
• 一貫した色彩設計のトークン

インストール

• pnpm add @yumehiko/jp-ui @base-ui/react @tabler/icons-react react react-dom

使い方

import '@yumehiko/jp-ui/style.css';
import { Button } from '@yumehiko/jp-ui';

export function App() {
  return <Button>OK</Button>;
}

プロバイダー / テーマ

import {
  TooltipProvider,
  ToastProvider,
  ToastViewport,
  createToastManager,
} from '@yumehiko/jp-ui';

const toastManager = createToastManager();

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <TooltipProvider>
      <ToastProvider manager={toastManager}>
        {children}
        <ToastViewport />
      </ToastProvider>
    </TooltipProvider>
  );
}

ライトトークンはデフォルトで適用されます。ダークトークンを有効にするには、ルート要素に theme-dark を付与してください。必要に応じて theme-light を使うと、ライトテーマをサブツリーに限定できます。

カスタムテーマ（3色指定）

Primary / Secondary / Tertiary の3色からトーンとRoleを生成できます。HEXに加えてHCT指定も利用できます。@yumehiko/jp-ui/style.css の後に適用してください。

import '@yumehiko/jp-ui/style.css';
import { createTheme } from '@yumehiko/jp-ui';

const { css } = createTheme({
  primary: '#4f46e5',
  secondary: '#f97316',
  tertiary: { h: 145, c: 55, t: 65 },
});

const style = document.createElement('style');
style.textContent = css;
document.head.append(style);

ドキュメント

• 概要
• 使い方
• コンポーネント
• トークン
• アイコン
• Storybook（GitHub Pages）

Codexスキル（任意）

コーディングエージェントがjp-uiの利用ガイドを読み込めるように、スキルをプロジェクトにコピーします。

mkdir -p .codex/skills && cp -R node_modules/@yumehiko/jp-ui/docs/skills/jp-ui-consumer .codex/skills/

開発者向け

このセクションはリポジトリ開発用です。パッケージ利用者が実行する必要はありません。

スクリプト

• pnpm dev
• pnpm build
• pnpm lint
• pnpm typecheck
• pnpm storybook (コンポーネント例)
• pnpm build-storybook
• pnpm gen:tones
• pnpm gen:roles
• pnpm gen:roles-css