ホーム/はじめに/ガイド/はじめに

はじめに

BlueAI Design System を使い始めるための 4 ステップ。

パッケージをインストール

bun（または npm）でパッケージを追加します。

bun add @blueai/ui

コンポーネントを import

必要なコンポーネントを直接 import します。

import { FormButton, FormInput, Modal } from "@blueai/ui";
import { SearchIcon, PlusIcon } from "@blueai/ui/icons";

tokens.css を読み込む

デザイントークン（カラー・フォント・スペーシング）を有効にするため、アプリのエントリーポイントで CSS を読み込みます。

import "@blueai/ui/tokens.css";

コンポーネントを使う

あとは JSX でコンポーネントを配置するだけです。Props の詳細は各コンポーネントのドキュメントを参照してください。

function App() {
  const [name, setName] = useState("");

  return (
    <div>
      <FormInput
        label="名前"
        value={name}
        onChange={setName}
        placeholder="名前を入力"
      />
      <FormButton variant="primary" onClick={() => alert(name)}>
        送信
      </FormButton>
    </div>
  );
}