@mantine/core
Advanced tools
Package description
@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.
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>
);
}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 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 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 is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.
# 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
Now you can import and use any component from @mantine/core:
import { Button } from '@mantine/core';
function App() {
return <Button>Mantine button</Button>;
}
All Mantine packages have MIT licence. All Mantine dependencies also have MIT licence, except react-transition-group package which has BSD-3-Clause license.
FAQs
React components library focused on usability, accessibility and developer experience
The npm package @mantine/core receives a total of 360,960 weekly downloads. As such, @mantine/core popularity was classified as popular.
We found that @mantine/core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.