jp-ui-components

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

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

```tsx

import '@yumehiko/jp-ui/style.css';

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

export function App() {

return OK;

}

```

```tsx

import {

TooltipProvider,

ToastProvider,

ToastViewport,

createToastManager,

} from '@yumehiko/jp-ui';

const toastManager = createToastManager();

export function AppProviders({ children }: { children: React.ReactNode }) {

return (

{children}

);

}

```

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

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

```tsx

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

```

• [概要](docs/overview.md)
• [使い方](docs/usage.md)
• [コンポーネント](docs/components.md)
• [トークン](docs/tokens.md)
• [アイコン](docs/icons.md)
• [Storybook（GitHub Pages）](https://yumehiko.github.io/jp-ui/)

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

```sh

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