Adding Mantine Components to Your React Application

1. Installation:

First, you need to install Mantine in your React project. You can do this via npm or yarn:

npm install @mantine/core

or

yarn add @mantine/core

2. Importing Components:

After installation, you can import Mantine components into your React components:

import { Button, TextInput, Badge } from '@mantine/core';

3. Examples and Usage:

Let's explore how to use some of the commonly used Mantine components with examples:

a. Button Component:

The Button component is used to create clickable buttons in your UI. It supports various props for customization.

import { Button } from '@mantine/core';
 
function MyButton() {
  return (
    <Button variant="primary" size="md">
      Click Me
    </Button>
  );
}

b. TextInput Component:

The TextInput component is used to create input fields for text entry. It supports props for placeholder, value, onChange, and more.

import { TextInput } from '@mantine/core';
 
function MyTextInput() {
  return (
    <TextInput
      placeholder="Enter your name"
      value={value}
      onChange={(event) => setValue(event.target.value)}
    />
  );
}

c. Badge Component:

The Badge component is used to display a small status indicator or label. It supports props for color, children, and size.

import { Badge } from '@mantine/core';
 
function MyBadge() {
  return (
    <Badge color="blue">New</Badge>
  );
}

4. Documentation Links:

For more detailed documentation and examples, you can refer to the official Mantine documentation:

• Mantine Core Components (opens in a new tab)
• Button Component Documentation (opens in a new tab)
• TextInput Component Documentation (opens in a new tab)
• Badge Component Documentation (opens in a new tab)

By following these examples and referring to the documentation, you can effectively utilize Mantine components to build stylish and accessible user interfaces for your React applications.