React Mantine Register Form Example

In this tutorial, we will create mantine register form page in react mantine core. We will see sign up form, mantine sign up form with image using react mantine.

Install & Setup Vite + React + Typescript + Mantine UI

How to Use Mantine in Next.JS 13

React Mantine Sign Up Page Example

1. react mantine sign up form page using TextInput, PasswordInput, Checkbox, Anchor, Paper, Title, Text, Container, Group, Button component.

import {
  TextInput,
  PasswordInput,
  Anchor,
  Paper,
  Title,
  Text,
  Container,
  Group,
  Button,
  Stack,
} from "@mantine/core";

export default function Signup() {
  return (
    <Container size={520} my={40}>
      <Title
        align="center"
        sx={(theme) => ({
          fontFamily: `Greycliff CF, ${theme.fontFamily}`,
          fontWeight: 900,
        })}
      >
        Create an Account
      </Title>
      

      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
      <Stack>
      <TextInput label="Name" placeholder="Name" required />
        <TextInput label="Email" placeholder="[email protected]" required />
        <PasswordInput
          label="Password"
          placeholder="Your password"
        defaultValue="secret"
          required
        />
         <PasswordInput
        label="Confirm password"
        defaultValue="secret"
      />
      </Stack>
        <Group position="apart" mt="xs">
          <Anchor<"a">
            onClick={(event) => event.preventDefault()}
            href="#"
            size="sm"
          >
            Forgot password?
          </Anchor>
        </Group>
        <Button fullWidth mt="xl">
          Sign Up
        </Button>
        <Text color="dimmed" size="sm" align="center" mt={5}>
        Already have an account ?{" "}
        <Anchor<"a">
          href="#"
          size="sm"
          onClick={(event) => event.preventDefault()}
        >
          Sign IN
        </Anchor>
      </Text>
      </Paper>
    </Container>
  );
}

sign up form react mantine

2. react mantine sign up form page with Image.

import {
  Paper,
  createStyles,
  TextInput,
  PasswordInput,
  Button,
  Title,
  Text,
  Anchor,
  Group,
  Stack,
} from "@mantine/core";

const useStyles = createStyles((theme) => ({
  wrapper: {
    minHeight: 900,
    backgroundSize: "cover",
    backgroundImage:
      "url(https://images.unsplash.com/photo-1484242857719-4b9144542727?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1280&q=80)",
  },

  form: {
    borderRight: `1px solid ${
      theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[3]
    }`,
    minHeight: 900,
    maxWidth: 450,
    paddingTop: 80,

    [`@media (max-width: ${theme.breakpoints.sm}px)`]: {
      maxWidth: "100%",
    },
  },

  title: {
    color: theme.colorScheme === "dark" ? theme.white : theme.black,
    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
  },

  logo: {
    color: theme.colorScheme === "dark" ? theme.white : theme.black,
    width: 120,
    display: "block",
    marginLeft: "auto",
    marginRight: "auto",
  },
}));

export default function AuthenticationImage() {
  const { classes } = useStyles();
  return (
    <div className={classes.wrapper}>
      <Paper className={classes.form} radius={0} p={30}>
        <Title
          order={2}
          className={classes.title}
          align="center"
          mt="md"
          mb={8}
        >
          Create an Account
        </Title>
        <Stack>
          <TextInput label="Name" placeholder="Name" required />
          <TextInput label="Email" placeholder="[email protected]" required />
          <PasswordInput
            label="Password"
            placeholder="Your password"
            defaultValue="secret"
            required
          />
          <PasswordInput label="Confirm password" defaultValue="secret" />
        </Stack>
        <Group position="apart" mt="xs">
          <Anchor<"a">
            onClick={(event) => event.preventDefault()}
            href="#"
            size="sm"
          >
            Forgot password?
          </Anchor>
        </Group>
        <Button fullWidth mt="xl">
          Sign Up
        </Button>
        <Text color="dimmed" size="sm" align="center" mt={5}>
          Already have an account ?{" "}
          <Anchor<"a">
            href="#"
            size="sm"
            onClick={(event) => event.preventDefault()}
          >
            Sign IN
          </Anchor>
        </Text>
      </Paper>
    </div>
  );
}