@mantine/core

What is @mantine/core?

@mantine/core is a comprehensive React component library that provides a wide range of customizable UI components and hooks for building modern web applications. It focuses on accessibility, performance, and ease of use, making it a popular choice for developers looking to create responsive and visually appealing user interfaces.

What are @mantine/core's main functionalities?

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>
  );
}

Other packages similar to @mantine/core

material-ui

Material-UI is a popular React component library that implements Google's Material Design guidelines. It offers a wide range of components and customization options, making it a strong alternative to @mantine/core. Material-UI is known for its comprehensive documentation and large community support.

chakra-ui

Chakra UI is a simple, modular, and accessible component library that gives you the building blocks to create React applications with speed. It emphasizes ease of use and accessibility, similar to @mantine/core, and provides a wide range of customizable components.

ant-design

Ant Design is a comprehensive design system and React component library developed by Alibaba. It offers a wide range of high-quality components and design patterns, making it suitable for enterprise-level applications. Ant Design is known for its robust feature set and extensive documentation.

README

Mantine

Build better React applications. Mantine is a customizable component library with focus on accessibility and developer experience.

Links

• Documentation
• Getting Started
• Examples
• Contributing

Installation

To start using Mantine you need to install @mantine/core and its peer dependencies:

# With yarn
yarn add @mantine/core @mantine/hooks react-jss

# With npm
yarn add @mantine/core @mantine/hooks react-jss

# With install-peerdeps
npx install-peerdeps @mantine/core

Usage

Now you can import and use any component from @mantine/core:

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

function App() {
  return <Button>Mantine button</Button>;
}

Licence

All @mantine/ scoped packages, dependencies and peer dependencies have MIT licence.