Mantine

TagsInput allows users to enter multiple values, either by typing custom values or selecting from a list of suggestions. It is similar to MultiSelect, but specifically designed to allow custom input that is not present in the provided data array.

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

function Demo() {
  return <TagsInput data={['React', 'Angular', 'Vue']} />;
}

Create React App (CRA) was deprecated in early 2023. Starting from Mantine version 7.0, some styling features are not officially supported in CRA.

For new projects, it is highly recommended to use Vite or Next.js instead of CRA.

• For Single Page Applications (SPA), use Vite.
• Mantine provides official templates for Vite: Vite + Mantine template.

The @mantine/charts package provides several chart components for data visualization:

• AreaChart: For area-based visualizations.
• LineChart: For line-based visualizations.
• BarChart: For bar-based visualizations.
• Sparkline: For small, word-sized charts used to show trends.

Mantine introduced several new visualization and input components:

• AngleSlider: A slider component for angular selection.
• RadialBarChart: A chart component for radial bar visualizations.
• FunnelChart: A chart component for funnel-shaped data visualization.

The ResourcesMonthView component displays a month grid where each day cell contains resource lanes. This view is designed to show resource utilization across a month by placing events within their specific resource's lane.

<ResourcesMonthView ... />

The @mantine/charts package provides a set of components for building charts and graphs, built on top of recharts.

Available components include:

• AreaChart
• BarChart
• LineChart
• Sparkline

The WeekView component displays events for an entire week with time slots. It supports all-day events, overlapping events, drag and drop, custom time ranges, and more. It uses CSS container queries for responsive layouts, automatically adjusting padding and labels based on the container width.

import { WeekView } from '@mantine/schedule';

// Basic usage
<WeekView data={events} />

A polymorphic component is a component that allows you to change its underlying root HTML element or React component using the component prop. Every polymorphic component has a default element used when the component prop is omitted.

For example, the Button component defaults to a button element, but can be transformed into an anchor (a) tag to support link-like behavior.

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

function Demo() {
  return (
    <Button component="a" href="https://mantine.dev/" target="_blank">
      Mantine website
    </Button>
  );
}