はじめかた

前提条件

Stella UI を使用するには以下のpeer dependencies が必要です:

• React 18 または 19
• CSS Modules と ESM をサポートするバンドラー（Vite、Next.js など）

インストール

npm

npm install @stella-ds/react @stella-ds/theme

pnpm

pnpm add @stella-ds/react @stella-ds/theme

yarn

yarn add @stella-ds/react @stella-ds/theme

テーマのセットアップ

Stella UI のコンポーネントは --stella-* CSS カスタムプロパティに依存しています。アプリケーションのルートで一度だけ注入する必要があります。方法は 2 つあります:

方法 A — CSS インポート（推奨）

ルートレイアウトまたはエントリポイントでビルド済み CSS ファイルをインポートします:

import '@stella-ds/theme/css'

方法 B — JavaScript での注入

動的な注入が必要な場合（JS のみ環境や CSS インポートが使えない場合）:

import { injectCSSVars } from '@stella-ds/theme'

// 最初のレンダー前に一度呼ぶ
injectCSSVars()

方法 C — トークンオブジェクトを直接使う

プログラム的な利用のためにトークンマップにアクセスできます:

import { cssVariables, tokens } from '@stella-ds/theme'

// cssVariables: Record<string, string>  — { '--stella-color-cosmos-500': '#4f46e5', ... }
// tokens: nested object matching the tokens.json structure

基本的な使いかた

テーマのセットアップ後、@stella-ds/react からコンポーネントを直接インポートします:

import '@stella-ds/theme/css'
import { Button, Input, Card, CardContent } from '@stella-ds/react'

export default function ContactForm() {
  return (
    <Card>
      <CardContent>
        <Input placeholder="メールアドレス" size="md" />
        <Button variant="solid" size="md">
          登録する
        </Button>
      </CardContent>
    </Card>
  )
}

Next.js との連携

App Router（Next.js 13 以降）

@stella-ds/react のコンポーネントはすべて Client Component です（tsup ビルドバナーで "use client" を付与）。Server Component から自由にインポートできます — Next.js が自動的にバウンダリを処理します。

// app/layout.tsx
import '@stella-ds/theme/css'   // ← ルートレイアウトでテーマをインポート

// app/page.tsx（Server Component）
import { Button } from '@stella-ds/react'  // ✅ そのまま動く

export default function Page() {
  return <Button variant="glow">Server Component から Hello</Button>
}

Pages Router（Next.js 12 以前）

// pages/_app.tsx
import '@stella-ds/theme/css'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

ヒント: 静的エクスポート

Stella UI は output: 'export' （静的生成）で動作します。サーバーサイド API は一切使用していません。

TypeScript

型定義がすべて同梱されているため、@types/* パッケージは不要です。variant / size の列挙型には判別共用体を使った厳密な型付けがされています。

次のステップ