はじめに

Radix Themes をインストールして、すぐに構築を始めましょう。

Radix Themes は、最小限の設定でそのまま使えるように設計された、スタイル済みのコンポーネントライブラリです。スタイルされていないコンポーネントをお探しの場合は、Radix Primitives をご覧ください。

インストール

セットアップは迅速かつ簡単です。

1. Radix Themes をインストールする

コマンドラインからパッケージをインストールします。

npm install @radix-ui/themes

2. CSS ファイルをインポートする

アプリケーションのルートでグローバル CSS ファイルをインポートします。

import '@radix-ui/themes/styles.css';

3. Theme コンポーネントを追加する

Theme をアプリケーションに追加し、ルートコンポーネントを body で囲みます。

import { Theme } from '@radix-ui/themes';

export default function () {
  return (
    <html>
      <body>
        <Theme>
          <MyApp />
        </Theme>
      </body>
    </html>
  );
}

4. 構築を開始する

これで Radix Themes コンポーネントを使用する準備が整いました。

import { Flex, Text, Button } from '@radix-ui/themes';

export default function MyApp() {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Radix Themes :)</Text>
      <Button>Let's go</Button>
    </Flex>
  );
}

テーマをカスタマイズする

設定は、Theme コンポーネントを介して管理および適用されます。

基本設定

設定を Theme に渡して、外観をカスタマイズします。

<Theme accentColor="crimson" grayColor="sand" radius="large" scaling="95%">
  <MyApp />
</Theme>

テーマパネルを使用する

ThemePanel は、テーマをリアルタイムでプレビューできるドロップインコンポーネントです。動作を確認するには、コンポーネントプレイグラウンドにアクセスしてください。

ThemePanel をアプリに追加するには、パッケージからインポートして、ルートの Theme 内にドロップします。

import { Theme, ThemePanel } from '@radix-ui/themes';

export default function () {
  return (
    <Theme>
      <MyApp />
      <ThemePanel />
    </Theme>
  );
}