10 Essential Mantine Components for Rapid UI Development

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

function MySelect() {
return (
<Select
label="Choose a fruit"
placeholder="Pick one"
data={[
{ value: 'apple', label: 'Apple' },
{ value: 'banana', label: 'Banana' },
{ value: 'orange', label: 'Orange' },
]}
/>
);
}

import { Modal, Button } from '@mantine/core';
import { useState } from 'react';

function MyModal() {
const [opened, setOpened] = useState(false);

return (
<>
<Modal
opened={opened}
onClose={() => setOpened(false)}
title="Welcome to Mantine!"
>
<p>This is the modal content.</p>
</Modal>

<Button onClick={() => setOpened(true)}>Open Modal</Button>
</>
);
}

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

function MyTabs() {
return (
<Tabs defaultValue="gallery">
<Tabs.List>
<Tabs.Tab value="gallery">Gallery</Tabs.Tab>
<Tabs.Tab value="messages">Messages</Tabs.Tab>
<Tabs.Tab value="settings">Settings</Tabs.Tab>
</Tabs.List>

<Tabs.Panel value="gallery">Gallery tab content</Tabs.Panel>
<Tabs.Panel value="messages">Messages tab content</Tabs.Panel>
<Tabs.Panel value="settings">Settings tab content</Tabs.Panel>
</Tabs>
);
}

import { Notification, Button } from '@mantine/core';
import { useState } from 'react';

function MyNotification() {
const [visible, setVisible] = useState(false);

return (
<>
{visible && (
<Notification
title="Success!"
onClose={() => setVisible(false)}
>
Your action was completed successfully.
</Notification>
)}

<Button onClick={() => setVisible(true)}>Show Notification</Button>
</>
);
}

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

function MyTable() {
const elements = [
{ position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
{ position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
{ position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
{ position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
{ position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

const rows = elements.map((element) => (
<tr key={element.name}>
<td>{element.position}</td>
<td>{element.name}</td>
<td>{element.symbol}</td>
<td>{element.mass}</td>
</tr>
));

return (
<Table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Symbol</th>
<th>Mass</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</Table>
);
}

import { Card, Image, Text, Badge, Button, Group } from '@mantine/core';

function MyCard() {
return (
<Card shadow="sm" padding="lg" radius="md" withBorder>
<Card.Section>
<Image
src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=720&q=80"
height={160}
alt="Norway"
/>
</Card.Section>

<Group position="apart" mt="md" mb="xs">
<Text weight={500}>Norway Fjord Adventures</Text>
<Badge color="pink" variant="light">
On Sale
</Badge>
</Group>

<Text size="sm" color="dimmed">
With Fjord Tours you can explore more of the magical fjord landscapes...
</Text>

<Button variant="light" color="blue" fullWidth mt="md" radius="md">
Book classic tour now
</Button>
</Card>
);
}

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

function MyAccordion() {
return (
<Accordion defaultValue="customization">
<Accordion.Item value="customization">
<Accordion.Control>Customization</Accordion.Control>
<Accordion.Panel>
Colors, fonts, shadows and many other parts are customizable to fit your design needs
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item value="flexibility">
<Accordion.Control>Flexibility</Accordion.Control>
<Accordion.Panel>
Configure components appearance and behavior with vast amount of settings or overwrite any part of component styles
</Accordion.Panel>
</Accordion.Item>

<Accordion.Item value="focus-ring">
<Accordion.Control>No annoying focus ring</Accordion.Control>
<Accordion.Panel>
With new :focus-visible pseudo-class focus ring appears only when user navigates with keyboard
</Accordion.Panel>
</Accordion.Item>
</Accordion>
);
}

import { DatePicker } from '@mantine/dates';

function MyDatePicker() {
return (
<DatePicker
placeholder="Pick date"
label="Event date"
withAsterisk
/>
);
}