クイックスタート
Ginga UIを使い始めるための簡単なガイドです。わずか3ステップで、美しいUIコンポーネントを使い始められます。
1. インストール
パッケージマネージャーを使ってGinga UIをインストールします。
pnpm add @ginga-ui/corenpmやyarnを使用している場合:
npm install @ginga-ui/core
# または
yarn add @ginga-ui/core2. CSS変数のインポート
各コンポーネントのCSSはインポート時に自動で読み込まれます。ルートコンポーネントでは、テーマのCSS変数定義のみをインポートします。Next.js App Routerの場合はlayout.tsxに記述します。
import "@ginga-ui/core/variables.css";3. コンポーネントを使う
コンポーネントを@ginga-ui/coreからインポートして使用します。
import { Button, Card, Heading } from "@ginga-ui/core";
export default function App() {
return (
<Card>
<Heading level="h2">はじめての Ginga UI</Heading>
<Button variant="filled" onPress={() => alert("クリック!")}>
クリックしてみる
</Button>
</Card>
);
}Next.js App Routerでの完全な例
Next.js 13以降のApp Routerを使用する場合の完全なセットアップ例です。
app/layout.tsx
import { ThemeClient } from "@ginga-ui/utils";
import "@ginga-ui/core/variables.css";
import "./globals.css";
export default async function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
// サーバーサイドでテーマを生成（オプション）
const themeClient = new ThemeClient({ provider: "openai" });
const { CSSCode } = await themeClient.generateTheme("モダンでクリーンなデザイン");
return (
<html lang="ja">
<body>
<style>{CSSCode}</style>
{children}
</body>
</html>
);
}app/page.tsx
import { Heading, Paragraph, Button } from "@ginga-ui/core";
export default function Home() {
return (
<main>
<Heading level="h1">Welcome to Ginga UI</Heading>
<Paragraph>AIで生成されたテーマを使用しています。</Paragraph>
<Button variant="filled">はじめる</Button>
</main>
);
}