Mantineで簡単なログイン画面を作ってみた

はじめに

プロジェクトで少しMantineを触る機会があり、復習も兼ねて環境構築から簡単なログイン画面を作ってみました！

Mantineとは？

Mantineは、Reactをベースにした軽量なUIコンポーネントフレームワークです。
100種類以上のカスタマイズ可能なコンポーネントと50以上の便利なhooksが用意されています。

https://mantine.dev/

環境準備

Node.jsのインストール

まずはNode.jsの公式サイトを開き、Node.jsをインストールします。
https://nodejs.org/ja/

プロジェクトの作成

ターミナルから以下コマンドでプロジェクトを作成します。

npx create-react-app {プロジェクト名} --template typescript

Mantineのインストール

ターミナルから以下コマンドでMantineをインストールします。

npm install @mantine/core

ログイン画面の実装

App.tsxを以下のようにします。
今回はログイン処理までは実装しておらず、簡単な画面だけです。
パスワードはマスクされるようPasswordInputコンポーネントを利用してます。

import {
  Box,
  Button,
  Center,
  Container,
  Input,
  MantineProvider,
  PasswordInput,
  Text,
} from "@mantine/core";

export default function Demo() {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Container maw={400} h={200} mt={100}>
        <Box
          sx={(theme) => ({
            backgroundColor: "#ffffff",
            padding: theme.spacing.xl,
            border: `2px solid ${theme.colors.gray[5]}`,
            borderRadius: theme.radius.md
          })}
        >
          <Text>ユーザーID</Text>
          <Input placeholder="ユーザーID" mb={20} />
          <Text>パスワード</Text>
          <PasswordInput placeholder="パスワード" mb={20} />
          <Center>
            <Button>ログイン</Button>
            </Center>
        </Box>
      </Container>
    </MantineProvider>
  );
}

実行

ターミナルから以下コマンドを実行し、サーバーを起動します。

npm run start

ブラウザーからhttp://localhost:3000にアクセスすると、以下のようなログイン画面が表示されます！

まとめ

今回は簡単にログイン画面だけ作成してみました。
この少ないコードでモダンなデザインのUIが構築できるのはよいですね！
公式のドキュメントがわかりやすいのもよいです！
ただ日本語のドキュメントがあまりないので、英語がんばらねばですが。。

今回はMantine Coreだけですが、hooksも今後触って記事にしていければと思っております！