Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mantine/core

Package Overview
Dependencies
Maintainers
1
Versions
391
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mantine/core

React components library focused on usability, accessibility and developer experience

  • 7.13.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
385K
decreased by-23.11%
Maintainers
1
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 23 Oct 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc