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);

ドキュメント

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

yumehiko/jp-ui

README