# Mantine 9.4.0 — 9.4.0 🥵

- Product: Mantine (https://whatsnew.fyi/product/mantine)
- Vendor: Mantine
- Date: 2026-06-22
- Version: 9.4.0
- Original notes: https://github.com/mantinedev/mantine/releases/tag/9.4.0
- Permalink: https://whatsnew.fyi/product/mantine/releases/9.4.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'.

---

- **added** — Add ComboboxPopover component for adding a combobox dropdown with selectable options to any button element, supporting single and multiple selection modes
- **added** — Add DataList component for displaying label-value pairs as a semantic description list with support for vertical and horizontal orientations and dividers
- **added** — Add EmptyState component for displaying placeholders in no data situations with support for icon, title, description, and call-to-action elements
- **added** — Add Menubar component for desktop-application style menu bar with horizontal row of top-level menu triggers and arrow key navigation

[View changelog with demos on mantine.dev website](https://mantine.dev/changelog/9-4-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.

##### ComboboxPopover component

New [ComboboxPopover](https://mantine.dev/core/combobox-popover) component allows adding a combobox dropdown
with selectable options to any button element. Unlike `Select` and `MultiSelect`, it does not
render an input – you provide your own target element via `ComboboxPopover.Target`. Supports
single and multiple selection modes with the same `data` format as `Select`.

```tsx
import { useState } from 'react';
import { Button, ComboboxPopover } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <ComboboxPopover
      data={['React', 'Angular', 'Vue', 'Svelte']}
      value={value}
      onChange={setValue}
    >
      <ComboboxPopover.Target>
        <Button variant="default" miw={200}>{value || 'Select framework'}</Button>
      </ComboboxPopover.Target>
    </ComboboxPopover>
  );
}
```

##### DataList component

New [DataList](https://mantine.dev/core/data-list) component displays label-value pairs as a semantic description
list using `dl`, `dt`, and `dd` HTML elements. Supports vertical and horizontal orientations,
dividers between items, and all standard Mantine features like Styles API and size prop.

```tsx
import { DataList } from '@mantine/core';

const data = [
  { label: 'Name', value: 'John Doe' },
  { label: 'Email', value: 'john@example.com' },
  { label: 'Role', value: 'Software Engineer' },
  { label: 'Location', value: 'San Francisco, CA' },
];

function Demo() {
  return (
    <DataList size="md" orientation="vertical" withDivider={false}>
      {data.map((item) => (
        <DataList.Item key={item.label}>
          <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
          <DataList.ItemValue>{item.value}</DataList.ItemValue>
        </DataList.Item>
      ))}
    </DataList>
  );
}
```

##### EmptyState component

New [EmptyState](https://mantine.dev/core/empty-state) component displays a placeholder for "no data" situations:
empty search results, empty tables and lists, first-run states or error illustrations with an
optional call to action. It can be used with `icon`, `title` and `description` shorthand props
or with `EmptyState.Indicator`, `EmptyState.Title`, `EmptyState.Description` and
`EmptyState.Actions` compound components for full control.

```tsx
import { Button, EmptyState } from '@mantine/core';
import { MagnifyingGlassIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <EmptyState>
      <EmptyState.Indicator>
        <MagnifyingGlassIcon />
      </EmptyState.Indicator>
      <EmptyState.Title>No results found</EmptyState.Title>
      <EmptyState.Description>
        We couldn't find anything matching your search. Try adjusting your filters or searching with
        different keywords to see more results.
      </EmptyState.Description>
      <EmptyState.Actions>
        <Button variant="default">Reset filters</Button>
        <Button variant="default">Create new</Button>
      </EmptyState.Actions>
    </EmptyState>
  );
}
```

##### Menubar component

New [Menubar](https://mantine.dev/core/menubar) component adds a desktop-application style menu bar: a horizontal row
of top-level menu triggers (File, Edit, View, …) where each trigger opens a dropdown. Arrow keys
move between the top-level menus, and once one menu is opened, moving to a sibling opens it
immediately. `Menubar` is built on top of `Menu` and follows the WAI-ARIA menubar pattern.

```tsx
import { Menu, Menubar, Text } from '@mantine/core';

function Demo() {
  return (
    <Menubar>
      <Menubar.Men

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