@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 core

Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

Links

• Documentation
• Core components by category
• Hooks list
• Notifications system
• Contributing
• Ask question or give feedback
• Changelog
• Sign up for monthly newsletter
• Follow Mantine on Twitter
• Join Discord community

Features

• Customization – colors, fonts, shadows and many other parts are customizable to fit your design needs
• Flexibility – configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
• Dark theme – mantine supports dark theme by default in all components
• Accessibility and usability – all components follow accessibility best practices and feature full keyboard support
• TypeScript – all @mantine/ scoped packages are built with TypeScript and support it by default
• Ready for production – mantine is well tested and works in all modern browsers
• Developer experience – mantine comes with more than 50 components and 15 hooks to cover you in most cases
• No annoying focus ring – with new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
• React JSS – take advantage of all react-jss features: automatic critical css extraction during ssr, lazy evaluation, dynamic theming and others
• React and Preact – mantine works flawlessly with preact

Installation

# 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 packages have MIT licence. All Mantine dependencies also have MIT licence, except react-transition-group package which has BSD-3-Clause license.