@mantine/core

Button

The Button component is a versatile and customizable button element that can be used to trigger actions or navigate within the application.

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

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

Modal

The Modal component provides a way to display content in a dialog overlay, which can be used for forms, notifications, or additional information.

import { useState } from 'react';
import { Modal, Button } from '@mantine/core';

function Demo() {
  const [opened, setOpened] = useState(false);

  return (
    <>
      <Button onClick={() => setOpened(true)}>Open modal</Button>
      <Modal opened={opened} onClose={() => setOpened(false)}>
        Modal content
      </Modal>
    </>
  );
}

Grid

The Grid component allows for the creation of responsive layouts using a flexible grid system, making it easy to arrange content in a structured manner.

import { Grid, Col } from '@mantine/core';

function Demo() {
  return (
    <Grid>
      <Col span={4}>1</Col>
      <Col span={4}>2</Col>
      <Col span={4}>3</Col>
    </Grid>
  );
}

Notifications

The Notifications component provides a way to display temporary messages to the user, which can be used for alerts, confirmations, or other types of feedback.

import { showNotification } from '@mantine/notifications';

function Demo() {
  return (
    <Button onClick={() => showNotification({ message: 'Hello, world!' })}>
      Show notification
    </Button>
  );
}