Mantine

View changelog with demos on mantine.dev website

Support Mantine development

You can now sponsor Mantine development with OpenCollective.

All funds are used to improve Mantine and create new features and components.

Migration to oxc

Mantine has migrated its linting and formatting toolchain from ESLint and Prettier

to oxc – oxlint is now used

as the linter and oxfmt as the formatter. Both

tools are written in Rust and are significantly faster than their predecessors, which

makes linting and formatting the entire codebase almost instant.

The shared configuration is available as a new

oxc-config-mantine package (a replacement for the previous

eslint-config-mantine). You can use it in your own projects to follow the same

code style and conventions as Mantine.

Native level select in date pickers

DatePicker and all other date picker components (DatePickerInput,

MonthPicker, YearPicker, DateTimePicker, etc.)

now support the withNativeLevelSelect prop. When enabled, it replaces the calendar header level button

with native <select> elements, making it easy to quickly navigate to a specific month and year.

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

function Demo() {
  return <DatePicker withNativeLevelSelect yearsSelectRange={[2020, 2035]} />;
}

Timeline opposite and alternate content

Timeline Timeline.Item component now supports the opposite prop that allows

rendering content on the opposite side of the timeline. When any item has the opposite prop,

the timeline switches to a centered layout with content on both sides of the line.

import { Timeline, Text } from '@mantine/core';
import { GitBranchIcon, GitCommitIcon, GitPullRequestIcon, ChatCircleDotsIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <Timeline active={1} bulletSize={24} lineWidth={2}>
      <Timeline.Item
        bullet={<GitBranchIcon size={12} />}
        title="New branch"
        opposite={
          <Text size="sm" c="dimmed">
            2 hours ago
          </Text>
        }
      >
        <Text c="dimmed" size="sm">You&apos;ve created new branch <Text variant="link" component="span" inherit>fix-notifications</Text> from master</Text>
      </Timeline.Item>

      <Timeline.Item
        bullet={<GitCommitIcon size={12} />}
        title="Commits"
        opposite={
          <Text size="sm" c="dimmed">
            52 minutes ago
          </Text>
        }
      >
        <Text c="dimmed" size="sm">You&apos;ve pushed 23 commits to <Text variant="link" component="span" inherit>fix-notifications branch</Text></Text>
      </Timeline.Item>

      <Timeline.Item
        title="Pull request"
        bullet={<GitPullRequestIcon size={12} />}
        lineVariant="dashed"
        opposite={
          <Text size="sm" c="dimmed">
            34 minutes ago
          </Text>
        }
      >
        <Text c="dimmed" size="sm">You&apos;ve submitted a pull request <Text variant="link" component="span" inherit>Fix incorrect notification message (#187)</Text></Text>
      </Timeline.Item>

      <Timeline.Item title="Code review" bullet={<ChatCircleDotsIcon size={12} />}>
        <Text c="dimmed" size="sm"><Text variant="link" component="span" inherit>Robert Gluesticker</Text> left a code review on your pull request</Text>
      </Timeline.Item>
    </Timeline>
  );
}

Set the alternate prop on individual Timeline.Item components to swit

Mantine

NPM

Backers

GitHub contributors

npm

npm

Help wanted

Discord

X Follow

Links

• Documentation
• Contribute
• Ask question or give feedback
• Changelog
• Follow on X
• Join Discord community

Packages

• @mantine/hooks – collection of 80+ hooks for state and UI management
• @mantine/core – core components library – 100+ components
• @mantine/form – forms management library
• @mantine/charts – recharts based charts library
• @mantine/notifications – a fully featured notifications system
• @mantine/spotlight – Ctrl + K command center for your application
• @mantine/code-highlight – code highlight built with highlight.js
• @mantine/tiptap – a Tiptap based rich text editor
• @mantine/dropzone – manages files drag 'n' drop to an area or entire screen
• @mantine/carousel – Carousel component
• @mantine/nprogress – navigation progress
• @mantine/modals – centralized modals manager
• @mantine/schedule – Schedule component for displaying events

Getting help

Mantine has a very friendly community, we are always happy to help you get started:

• Join Discord community – it is the easiest way to get help, all questions are usually answered in about 30 minutes
• GitHub Discussions – ask anything about the project or give feedback

Contributors

<a href="https://github.com/mantinedev/mantine/graphs/contributors">

<img src="https://contrib.rocks/image?repo=mantinedev/mantine" />

</a>

Become a contributor

Support development

Backers

Mantine is a MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers. If you'd like to join them, please consider contributing financially on OpenCollective.

Backers

License

MIT