npm install @shopify/polaris

shopify app dev

<Page title="Polarisでアプリ管理画面を作ろう！">
  {/* 子要素をここに入れる */}
</Page>

<Layout>
  <Layout.Section>
    {/* 通常幅のセクション */}
  </Layout.Section>
  <Layout.Section variant="oneThird">
    {/* 画面幅の1/3サイズのセクション */}
  </Layout.Section>
  <Layout.Section variant="fullWidth">
    {/* フル幅のセクション */}
  </Layout.Section>
</Layout>

<Card title="Cardコンポーネント">
  <Text as="p">ここに説明や内容を記載します。</Text>
</Card>

<Text as="h2" variant="headingSm">見出しの例</Text>
<Text as="p">ここに本文を記載します。</Text>

<Link url="<https://polaris.shopify.com/components/navigation/link>" target="_blank">
  Linkコンポーネントの詳細
</Link>

<MediaCard
  title="MediaCardコンポーネント"
  primaryAction={{
    content: "詳細を見る",
    onAction: () => console.log("クリックされました"),
  }}
  description="画像と説明文を組み合わせて情報を魅力的に伝えます。"
  size="small"
>
  <img
    alt="サンプル画像"
    width="100%"
    height="160px"
    style={{ objectFit: "cover" }}
    src="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
  />
</MediaCard>

<ButtonGroup gap="loose">
  <Button onClick={() => alert("通常ボタン")}>通常ボタン</Button>
  <Button variant="primary" tone="critical">Criticalボタン</Button>
  <Button disabled>クリック不可</Button>
</ButtonGroup>

<FooterHelp>
  他にもたくさんのコンポーネントがあります。{" "}
  <Link url="<https://polaris.shopify.com/components>" target="_blank">
    公式ドキュメント
  </Link>{" "}
  を参考にカスタマイズしてみてください。
</FooterHelp>

import { Page, Layout, Card, Text, Link, MediaCard, FooterHelp, ButtonGroup, Button } from "@shopify/polaris";

export default function Index() {
  return (
    <Page title="Polarisでアプリ管理画面を作ろう！">
      <Layout>
        <Layout.Section variant="fullWidth">
          <Card roundedAbove="sm">
            <Text as="h2" variant="headingSm">
              Textコンポーネント
            </Text>
            <Text as="p">
              見出しや本文を表現できます。詳細は{" "}
              <Link
                url="https://polaris.shopify.com/components/typography/text"
                target="_blank"
              >
                こちら
              </Link>
              をご覧ください。
            </Text>
          </Card>
        </Layout.Section>

        <Layout.Section variant="oneThird">
          <Text as="h2" variant="headingSm">
            Layoutコンポーネント
          </Text>
        </Layout.Section>

        <Layout.Section>
          <Card roundedAbove="sm">
            <Text as="p" variant="bodyMd">
              セクションごとにコンテンツを整理して表示するためのレイアウトラッパーです。<br />
              <code>Layout.Section</code> を使うことで、複数のブロックを1行に並べることができます。<br />
              詳細は{" "}
              <Link
                url="https://polaris.shopify.com/components/layout/"
                target="_blank"
              >
                こちら
              </Link>
              をご参照ください。
            </Text>
          </Card>
        </Layout.Section>

        <Layout.Section>
          <Card roundedAbove="sm">
            <Text as="h2" variant="headingSm">
              Cardコンポーネント
            </Text>
            <Text as="p" variant="bodyMd">
              コンテンツをカード形式で表示できます。{" "}
              <Link
                url="https://polaris.shopify.com/components/layout-and-structure/card?example=card-with-section"
                target="_blank"
              >
                ドキュメントページ
              </Link>{" "}
              には、子要素の配置に役立つサンプルコードが多数掲載されています。
            </Text>
          </Card>
        </Layout.Section>

        <Layout.Section>
          <MediaCard
            title="MediaCardコンポーネント"
            primaryAction={{
              content: "MediaCardのドキュメントページに移動",
              onAction: () =>
                window.open(
                  "https://polaris.shopify.com/components/layout-and-structure/media-card?example=media-card-with-small-visual",
                  "_blank"
                ),
            }}
            description="画像と説明文でコンテンツを魅力的に伝えたいときに便利です。"
            size="small"
          >
            <img
              alt="Polarisの空の状態のサンプル画像"
              width="100%"
              height="160px"
              style={{ objectFit: "cover" }}
              src="https://cdn.shopify.com/s/files/1/0757/9955/files/empty-state.svg"
            />
          </MediaCard>
        </Layout.Section>

        <Layout.Section>
          <Card roundedAbove="sm" padding="500">
            <Text as="h2" variant="headingSm">
              Buttonコンポーネント
            </Text>
            <Text as="p" variant="bodyMd">
              様々なスタイルのボタンを作成できます。
            </Text>

            <ButtonGroup gap="loose">
              <Button
                url="https://polaris.shopify.com/components/actions/button?example=button"
                target="_blank"
              >
                通常ボタン
              </Button>
              <Button
                url="https://polaris.shopify.com/components/actions/button?example=button-primary-critical"
                target="_blank"
                variant="primary"
                tone="critical"
              >
                Criticalボタン
              </Button>
              <Button
                url="https://polaris.shopify.com/components/actions/button?example=button-disabled-state"
                target="_blank"
                disabled
              >
                クリック出来ないボタン
              </Button>
            </ButtonGroup>

            <Text as="p" variant="bodyMd">
              各ボタンをクリックすると、該当のドキュメントページへ遷移します。<br />
              なお、ボタンの間隔は{" "}
              <Link
                url="https://polaris.shopify.com/components/actions/button-group"
                target="_blank"
              >
                ButtonGroup
              </Link>{" "}
              コンポーネントの <code>gap</code> プロパティで調整しています。
            </Text>
          </Card>
        </Layout.Section>

        <Layout.Section>
          <FooterHelp>
            他にもたくさんのコンポーネントがあります。{" "}
            <Link url="https://polaris.shopify.com/components" target="_blank">
              公式ドキュメント
            </Link>{" "}
            を参考にカスタマイズしてみてください。
          </FooterHelp>
        </Layout.Section>
      </Layout>
    </Page>
  );
}