# Mantine 9.5.0 — 9.5.0 🤖

- Product: Mantine (https://whatsnew.fyi/product/mantine)
- Vendor: Mantine
- Date: 2026-07-27
- Version: 9.5.0
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.5.0
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.5.0

What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog.

Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'.

---

- **changed** — Migrate linting and formatting toolchain from ESLint and Prettier to oxc, with oxlint as the linter and oxfmt as the formatter
- **added** — Add oxc-config-mantine package as a replacement for eslint-config-mantine for shared code style configuration
- **added** — Add withNativeLevelSelect prop to DatePicker and all other date picker components to replace calendar header level button with native select elements
- **added** — Add yearsSelectRange prop to date picker components for configuring the range of years available in the native select
- **added** — Add opposite prop to Timeline.Item component to render content on the opposite side of the timeline
- **added** — Add alternate prop to Timeline.Item component to switch the position of content and opposite

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/9-5-0)

##### Support Mantine development

You can now sponsor Mantine development with [OpenCollective](https://opencollective.com/mantinedev).
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](https://oxc.rs) – [oxlint](https://www.npmjs.com/package/oxlint) is now used
as the linter and [oxfmt](https://www.npmjs.com/package/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](https://mantine.dev/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](https://mantine.dev/dates/date-picker) and all other date picker components ([DatePickerInput](https://mantine.dev/dates/date-picker-input),
[MonthPicker](https://mantine.dev/dates/month-picker), [YearPicker](https://mantine.dev/dates/year-picker), [DateTimePicker](https://mantine.dev/dates/date-time-picker), 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.

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

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

##### Timeline opposite and alternate content

[Timeline](https://mantine.dev/core/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.

```tsx
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` compon

_[Truncated at 4000 characters — full notes: https://github.com/mantinedev/mantine/releases/tag/9.5.0]_