Mantine online editor

Write, Run & Share Mantine code online using OneCompiler's Mantine online editor for free. It's one of the robust, feature-rich online editors for Mantine. Getting started with the OneCompiler's Mantine online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Mantine' and start writing code to learn and test online without worrying about tedious process of installation.

About Mantine

Mantine is a React components library with a large catalog of components plus a set of hooks for everyday tasks. Styling comes from a real stylesheet you import, so there's no runtime CSS-in-JS to configure. You wrap the app in MantineProvider, and a theme object controls colors, spacing, and the default look.

Syntax help

Setup

Import the core stylesheet once and wrap your app in MantineProvider. Without the stylesheet the components render unstyled.

import '@mantine/core/styles.css';
import { MantineProvider, Button } from '@mantine/core';

function App() {
  return (
    <MantineProvider>
      <Button>Click me</Button>
    </MantineProvider>
  );
}

Buttons

A Button takes variant (filled, light, outline, subtle, default), a color from the theme, plus size and radius.

import { Button } from '@mantine/core';

<Button color="grape">Filled</Button>
<Button variant="outline" color="grape">Outline</Button>
<Button variant="light" radius="xl">Pill</Button>

Layout

Group lays children out in a row, Stack in a column, and Card gives you a bordered container. Most components accept spacing props like m, p, and mt.

import { Group, Stack, Card, Text } from '@mantine/core';

<Card shadow="sm" padding="lg" radius="md" withBorder>
  <Text fw={600}>Card title</Text>
  <Group mt="md">
    <Button>Confirm</Button>
    <Button variant="default">Cancel</Button>
  </Group>
</Card>

Inputs

Inputs such as TextInput keep the label, description, and error together. Drive them with value and onChange.

import { TextInput } from '@mantine/core';
import { useState } from 'react';

function EmailField() {
  const [email, setEmail] = useState('');
  return (
    <TextInput
      label="Email"
      placeholder="[email protected]"
      value={email}
      onChange={(e) => setEmail(e.currentTarget.value)}
    />
  );
}

Hooks

The @mantine/hooks package covers common UI state. useDisclosure manages an open/closed flag, which pairs nicely with modals and drawers.

import { useDisclosure } from '@mantine/hooks';
import { Button, Modal } from '@mantine/core';

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);
  return (
    <>
      <Button onClick={open}>Open</Button>
      <Modal opened={opened} onClose={close} title="Hello">
        Modal content
      </Modal>
    </>
  );
}

Theming

Pass a theme to MantineProvider to set the primary color, default radius, font, and your own color palettes.

import { MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  primaryColor: 'grape',
  defaultRadius: 'md',
});

// <MantineProvider theme={theme}> ... </MantineProvider>