mantinedev/mantine

A fully featured React components library

Mantine

Links

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

Packages

• @mantine/hooks – collection of 50+ 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

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

Become a contributor

License

MIT

mantine's Issues

Odd Typescript error with vite

Had some odd typescript errors today trying to use mantine in a new vite app.

I added the example app from https://github.com/mantinedev/mantine-next-example/blob/master/components/TodoList.jsx to this repo https://github.com/DavidWells/redux-toolkit-vite-example and got these errors

I wasn't able to find any references to emotion via github search https://github.com/mantinedev/mantine/search?q=emotion.

aside: Vite uses esmodules and I've seen it act odd with different NPM packages but it's crazy fast at starting/building. Would be cool to get mantine working with a vite example 😃

---

You can test this out with a fresh vite app via:

npm init @vitejs/app my-app -- --template react-ts

Sorting the Props in the props table in Alphabetical order

The props in the prop table of Components are not sorted in alphabetical order. It would be much more appealing if we can sort it in Alphabetical order and display the props.

Eg:

Extra "use-" in "use-form" text and link for the authentication example

Link: https://mantine.dev/pages/examples/#authentication-form
Quote: Built with use-use-form hook
PR: Sure

Looks like there's an extra use- in both the text and link.

JSS Error for Inputs - :disabled:placeholder

With any forms I am now seeing my console littered with:

The form itself renders fine - haven't noticed an issue with the color like it implies.

I don't know enough about JSS to understand the error, maybe a simple problem?

RingProgress component

@mantine/core should export RingProgress component

Example on codepen

Props:

• size (defaults to md) – defines width and height –MantineNumberSize – xs, sm, md, lg, xl – predefined in component styles, should be exported from @mantine/core as RING_PROGRESS_SIZES variable (see other components) + number value to set width and height in px.
• sections (required) – { value: number; color: string }[], where value is % of how much space given section takes and color is color from theme
• label – ReactNode – label displayed in the center of the ring
• thickness – number – thickness of ring in px

Module '"@mantine/core"' has no exported member 'SegmentedControl'

Hi,

according to the docs, the core package should have named export of the SegmentedControl component.
But it doesn't.

I've checked the library's source code and even didn't find any folder with an identical or similar name :)

The idea is cool, but something is missing ;)

Cannot work with vitejs.

I'am using mantine in vitejs. But it's not work.

The source code is here. https://github.com/blackcater/vitejs-with-mantine.bug-report

Controlled inputs shouldn't set their value

Packages: @mantine/hooks @mantine/core
Version: 2.0.5
Browsers: Edge 91 (not relevant)
Codesandbox: https://codesandbox.io/s/clever-gagarin-qik7m?file=/src/App.tsx
Contribution: I haven't looked into the hook in detail to consider how the issue should be fixed, however I'm willing to contribute it if instructed to do.

Description:
Input components in controlled mode should never set their own value - it needs to always come from outside as the requested change may be blocked and parent component might not render again. As you can see in codesandbox the native selects value correctly never changes (because the handler is omiting the setValue call), but Select component does. This applies to all components using useUncontrolled as far as I can tell.

Intermediate !== Indeterminate

Sorry to be that guy. :D

SSR Modal has client/server hydration mismatch

Hi there! Trying out this package after seeing it in the #1 spot on React Status Newsletter. It looks really well put together so far!

I have a use case that involves rendering a Modal via SSR (not within a Portal, which don't work with SSR anyway). When trying this out there's a client/server hydration mismatch.

Here's a minimal example that stems from your next example, but it will reproduce regardless of SSR framework: https://codesandbox.io/s/condescending-leakey-q3sh2?file=/pages/index.jsx

Just look at the console when loading that page to see an error like:

Warning: Prop `id` did not match. Server: "mantine-ayfd64s7a" Client: "mantine-d9vq5oqlf"
    at div
    at u (webpack-internal:///./node_modules/@mantine/core/dist/lib.js:1:5443)
    at div
    at div
    at u (webpack-internal:///./node_modules/@mantine/core/dist/lib.js:1:6852)
    at div
    at div
    at Transition (webpack-internal:///./node_modules/react-transition-group/esm/Transition.js:129:30)
    at s (webpack-internal:///./node_modules/@mantine/core/dist/lib.js:1:108891)
    at O (webpack-internal:///./node_modules/@mantine/core/dist/lib.js:1:139538)
    at Home
    at ThemeProvider (webpack-internal:///./node_modules/theming/dist/theming.esm.js:86:37)
    at c (webpack-internal:///./node_modules/@mantine/core/dist/lib.js:1:46520)
    at App (webpack-internal:///./pages/_app.jsx:29:25)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:156:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:645:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:778:24)

It seems to be mismatching on the modal title, which is strange. I haven't looked further into it, but happy to help out however I can.

Issues with Preact

I figured out the issue is that preact-compat is not supported for newer versions of preact, as it is built-in. The preact.config.js is also using the built-in preact/compat. However, your demo repository still has preact-compat installed, even though preact should complain if you try to install it. Nevertheless, if you try to remove preact-compat dependency, reinstall the packages, and run the application, it will throw the same errors as from this Reddit thread.

I am not sure how to solve this yet. If you try to add preact-compat by force, it will still throw the error.

Reddit thread: https://www.reddit.com/r/reactjs/comments/oeuspg/mantine_20_is_out_100_hooks_and_components_with/h4diaku/?context=3

@mantine/hooks: use-focus-trap – Add autofocus handling

See #101 for more details

Grid component

@mantine/core should export Grid component with 12 columns flexbox grid

Exported components:

• Grid – wrapper component
• Col – column component, defines column width

Grid component props:

• gutter (defaults to md) – defines horizontal and vertical spacing between columns – xs, sm, md, lg, xl – predefined in theme.spacing, number value to set spading in px.

Col component props:

• span – number – defines (span / 12)% of space which column will take

@mantine/core - Select - issue with defaultValue when using Placeholder

https://codesandbox.io/s/mantine-select-error-mkurq

Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.

This warning only appears when using placeholder.
See in the codesandbox, if you comment out the placeholder the warning doesn't appear.

Wrong link to view default theme source code

Currently link on here is targeting not existing file.
I think it should be
https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/theme/default-theme.ts

Hamburger menu won't scroll on Android browser

As the title - I can't scroll the hamburger menu in either Brave or Chrome on my Android 11 phone

MenuItem as Link not currently working

Unless undocumented and different to Button - I can't seem to get a MenuItem to behave like a React Router Link element. This works fine with Button elements. As per the docs:

https://mantine.dev/core/button/#usage-with-react-router-and-other-libraries

<MenuItem component={Link} to="/account" icon={<FontAwesomeIcon fixedWidth icon={faUserCog} />}>Account Settings</MenuItem>

This is key as my project uses MenuItem as React Router links in my application.

I looked at the source but have zero typescript experience so am a little confused. It almost looks like MenuItem is based on Button but it doesn't accept the props for component, to etc...

Font pops in when loading main page

Font pops in when loading main page.

Repro steps:

1. Go to https://mantine.dev/
2. refresh page

Result:

(the gif loops but the problem occurs only once in reality)

@mantine/notifications: Queue is not exposed on use-notifications hook

Notifications queue should be accessible via use-notifications hook

Next.js Warning: [JSS] Rule is not linked. Missing sheet option "link: true".

Hi all, currently when you use react-jss with Next.js you will see lots of Warning: [JSS] Rule is not linked. Missing sheet option "link: true". warnings in console.

This message should not impact your application styles in any way (if it happens please create separate issue for that). Current workaround is to monkey patch console.warn to filter out this exact message. To do so, add below code to _document.tsx file (see full example in teplate):

if (typeof window === "undefined") {
  const originalWarn = console.warn;
  console.warn = (...args: any) => {
    if (
      args[0] !==
      'Warning: [JSS] Rule is not linked. Missing sheet option "link: true".'
    ) {
      originalWarn(...args);
    }
  };
}

This is a temporary solution, I'll try to debug this issue and contribute to jss to solve this issue, you can see discussions here – cssinjs/jss#1492

Documentation: Make active link in navbar always visible

Currently, when the page loads navbar scroll position is always 0 (picture 1), we need to scroll the active link into view when the application is mounted.

Current behavior
After refresh navbar scroll position after the refresh is always 0

Expected behavior
After the application was mounted navbar scroll position should change to make the active page visible.

Autocomplete - doesn't show list if the entered text = one of the options

In most cases this is probably the expected behaviour, but there are edge cases which might want a flag to disable this.

With Autocomplete if you have entered the exact text of an option, the option list will not display even if there are options which still match the entered text.

For example if you had a data set of:

[John, John Butler, Johnny Drama, Johnny] - entering "John" would hide the other Autocomplete options.

I suggest there should be a toggle to disable this.

Reproduction:
https://codesandbox.io/s/mantine-autocomplete-syzs5?file=/src/App.js

My actual use case is the battery entry - there are many more options than that, but it is helpful to always see the matching options. You will see that the CR2020 option isn't even visible, if you type C it matches C and doesn't show an option. It would be good to still show matching CRxx options.

Prop did not match with DateRangePicker

Hello,
I would use te DateRangePicker in a NextJS project, but I have an error when I use this component. I built a demo app with the basic usage from Mantine documentation, and we can see in console:

Warning: Prop `htmlFor` did not match. Server: "mantine-f6quwf3w1" Client: "mantine-9woky8pog"

When I remove the label of DateRangePicker, it's display an another error => idfor button (not htmlFor). I use the 2.0.6 of Mantine.

Demo: https://stackblitz.com/edit/nextjs-aunbfb?devtoolsheight=33&file=pages/index.js

Thank you for your help.

@mantine/core: Put Modal and Drawer in Portal by default

Remove generics from pass through components

Currently components that allow changing root element with component prop require generic types to work:

<Button<"a", HTMLAnchorElement>
  component="a"
  href="https://mantine.dev"
  onClick={(event) => event.preventDefault()}
  elementRef={node => console.log(node)}
>
  Mantine
</Button>

First generic type resolves to React.ComponentPropsWIthoutRef<'a'> and second to { elementRef: React.ForwardedRef<HTMLAnchorElement> }.

It brings some confusion and will be much better if first argument can be omitted (ref type can still be done via generic):

// without elementRef
<Button
  component="a"
  href="https://mantine.dev"
  onClick={(event) => event.preventDefault()}
>
  Mantine
</Button>

// with elementRef
<Button<HTMLAnchorElement>
  component="a"
  href="https://mantine.dev"
  onClick={(event) => event.preventDefault()}
  elementRef={node => console.log(node)}
>
  Mantine
</Button>

Resources:

• ComponentPassThough type
• Button component used in example

[@mantine/core] Missing TS types in v1.3.0

After installing @mantine/[email protected] my IDE complained about missing TS types. After a quick look into node_modules/@mantine/core/package.json i saw that types are declared in package.json
("types": "lib/src/index.d.ts") but do not exist.

I've checked the package contents from npmjs.com (https://registry.npmjs.org/@mantine/core/-/core-1.3.0.tgz) and the typings are not included.

Also when cloning the repo and building mantine-core locally, it generates all typings as expected 🤷‍♂️

Can you please confirm and update the NPM package?

Great job with Mantine! First component library i really enjoy using without exceptions

SSR Styling issue

Hi, I'm using Next.js (Blitz.js) and there's an issue with the example provided in here.
When I refresh the page in a particular route (/login for example) all the styles are removed (SSR rendering)

And it seems to be related to the useEffect from the _app.js mentioned in the guide

  useEffect(() => {
    const jssStyles = document.getElementById("mantine-ssr-styles")
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles)
    }
  }, [])

If I remove that the styles are in place again when I refresh the route /login but the theme light/dark isn't working, the elements don't switch the theme properly.

In the main route localhost:3000 the issue is not reproducible, only in internal routes.

I'm using the latest mantine version with react-jss.

Menu popup position beneath button/icon?

@mantine/core - Menu

See example here where I've made it work with menuPosition prop.
https://codesandbox.io/s/mantine-menu-popup-position-8xegv

However I feel this is a bit hacky and it might be better if the Menu component were able to set a basePosition somewhere else.

For example if you set the basePosition of the Menu to 'bottom-left' then the 0:0 coordinate of the Menu is the bottom-left of the control component. I am sure you get my suggestion, this would still allow for adjustments via menuPosition where you can nudge it with left/right/top/bottom values...

Any thoughts on this one? I am happy to just keep doing what I've got in that demo - but having the Menu obscure the button is not the best in my application.

@mantine/core Input: remove overflow on right section

Issue described in discussion – #40

@mantine-hooks: useClickOutside fires double on touch devices

Package: @matine/hooks
Version: 1.0.6
Browser: Chrome DevTools & Chrome Mobile

A preventDefault call on the underlying event should prevent any further handling of a touch event.

@mantine/hooks: use-media-query should set initial state based on media query

Package: @mantine/hooks

The use-media-query hook should set the initial state based on an initial query of the media query.

This prevents e.g. a jump from light to dark color scheme at mounting of the app.

Custom theme keys are discarded

Providing a custom theme like this:

<MantineProvider theme={{brand: 'red'}}>
...
</MantineProvider>

... ends up discarding the brand key silently. I believe this is because of

mantine/src/mantine-theme/src/utils/merge-theme/merge-theme.ts

Line 12 in 12ceb34

return Object.keys(currentTheme).reduce((acc, key) => {

I think at least documentation here would be nice (I checked the unpublished theming doc), but ideally these keys would be merged into the theme object.

Roadmap and contributing

We are always looking for your help and contributions to the Mantine codebase, to learn about current open tasks see Mantine raodmap – it's a great starting point. If you need any help with your contribution contact us on Discord

Follow these steps to contribute to Mantine:

• Choose task that you want to work on from Backlog column or help wanted section on Github
• Create new issue on GitHub and tell us that you want to build a specific feature
• Work on your task according to documentation provided in task card
• If you have any questions during development you can join Mantine Discord server and get help from maintainer and community – https://discord.gg/eUZpPbpxb4
• Once your task is done run npm test and if everything is fine submit a Pull Request
• If you cannot finish your task or changed your mind – that's totally fine, just let us know in GitHub issue that you've created in first step. Mantine community is friendly – we won't judge or ask any questions if you decide to cancel your submission
• Wait until your code will be reviewed by maintainer and fix all problems found during code review
• You are awesome! Your contribution was merged!

@mantine/hooks missing types

@mantine/hooks missing Typescript types

NumberInput in Safari with precision doesn't allow form submission

In Safari the <NumberInput> field doesn't work as expected if you have decimal places.
The automated browser form field sanitisation blocks form submission until you remove the decimal places.

Repo:
https://codesandbox.io/s/mantine-number-precision-3s3f5?file=/src/App.js

What happens in Safari:

Note: the fix for this is to add step="any" to the <NumberInput>.
Perhaps this can be added to the docs for NumberInput or even a default value added if no step is provided as a prop?

Warning: [JSS] Rule is not linked. Missing sheet option "link: true".

When starting the mantine-next-example with npm run dev, when you visit the root in your browser, you will see a flood of Warning: [JSS] Rule is not linked. Missing sheet option "link: true". messages in the terminal (not in the browser) due to SSR.

It looks like this is due to cssinjs/jss#1277 but you may want to at least call this out in the SSR documentation so it doesn't surprise folks / make them think something is wrong?

Add new props to the Hr element

Currently, the Hr component has only three props as variant, size, and color. We can have some more useful props such as inset(left, right, middle), orientation(vertical, horizontal), subHeader, and width.

Note: I am considering Hr in this package to be a standard Divider

Progress:

• Inset
• Orientation
• subHeader
• subHeaderStyle
• Docs
• Tests
• Stories

Can't use DatePicker within a form as it triggers form to submit

Love the DatePicker component - unfortunately it seems to submit any forms that it is part of.

See reproduction here:

https://codesandbox.io/s/mantine-date-picker-in-forms-nvo2f

Select - loses initial value when value is a Number and not String

Reproduction:
https://codesandbox.io/s/mantine-select-strange-behaviour-fh9zd?file=/src/App.js

See what I mean in this GIF:

Strange edge case...

Select (new select) doesn't update the value if state modified externally [controlled]

It appears that if you change the underlying value of the Select it works, but doesn't update the UI to show the user.
You need to click into the field and back out to see the update.
This results in the UI & value being out of sync:

Open the sandbox, choose 'Hello' or 'World' - then click the button which updates the state to equal 'Testing'.
The Select will still show the previous value, although state has been updated.

See reproduction here:
https://codesandbox.io/s/mantine-select-not-updating-5uf0u?file=/src/App.js

Tabs/Tab - missing padding between Tab Control & Tab Content

Question on Tabs, there previously was padding between the tab bar and the tab content.
Do we now need to use the Styles API to inject some padding, or is the below a bug.

No padding at all - which is strange because even in the docs there is padding.
See the highlighted text butts up against the outline tab bar.
This is happening across all the tabs in my app (using mix of default and outline variants).

My App (seems broken):

Mantin Docs (works correctly!):

The immediate child inside the <Tab> is a <form> - but not sure why that would make a difference.
Other tabs which are affected have <Text> or vanilla <div> as the immediate children.

Code for my screenshot:

<div style={{ position: 'relative' }}>
  <LoadingOverlay visible={loading} />
  <Tabs variant="outline">
    <Tab
      disabled={disableTabs}
      icon={<FontAwesomeIcon icon={faAddressCard} />}
      label="Profile"
    >
      <form>...</form>
    </Tab>
  </Tabs>
</div>

Examples page claims to be 404

The /examples pages claims to be a 404 error page.
Otherwise, the docs look great!

Classname issue in SSR

Hello there 👋🏻

Following the example from the theme selector, I saw an issue with the classname while using SSR

Warning: Prop `className` did not match. Server: "actionIcon-0-2-15 actionIcon-d4-0-2-21
outline-0-2-16 outline-d5-0-2-22 child-0-2-8 child-d1-0-2-10 dark-0-2-5" 
Client: "actionIcon-0-2-19 actionIcon-d10-0-2-31 outline-0-2-20 outline-d11-0-2-32
 child-0-2-10 child-d3-0-2-14 dark-0-2-7"
    at button...

It seems hydration is not working as expected in the <ActionIcon /> component.

Tech notes:

"@mantine/core": "1.0.6",
"@mantine/hooks": "1.0.6",
"@mantine/notifications": "1.0.6",
"react-jss": "10.6.0"
"blitz": "0.34.3"

Cheers

edit: on prod build the error is not there, only reproducible on dev mode 😄

findDOMNode is deprecated in StrictMode

Package: @mantine/core
Version: 1.2.1
Codesandbox: https://codesandbox.io/s/recursing-kepler-vzdm8?file=/src/App.js

Hi,
I have started using mantine and it works great, but when using React.StrictMode, a warning is printed in the console when a tooltip is triggered:

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

It appears to be linked to Transition (which I do not use directly in my code).

Slider component

@mantine/core should export Slider component.

Example on codepen

Features for initial version:

• Single handle (range support may be added in future versions)
• Tooltip over handle
• Min, max and step support
• Horizontal orientation only
• Only controlled variant
• Component should follow WAI ARIA practices

Component props:

• size (defaults to md) – defines track height – xs, sm, md, lg, xl – predefined in component styles, should be exported from @mantine/core as SLIDER_SIZES variable (see other components) + number value to set height in px.
• thumbSize (defaults to md) – defines thumb size – predefined in component styles + number value to set height and width in px.
• thumbRadius (defaults to sm) – xs, sm, md, lg, xl – defines thumb border-radius – predefined in theme.radius + number value to set border-radius in px.
• thumbShadow (defaults to xs) – xs, sm, md, lg, xl – defines thumb box-shadow – predefined in theme.shadows + string value to set custom box-shadow.
• min = 0, max = 100, step = 1 – all number
• value (required) – number – current value
• onChange (required) – (value: number) => void – calls when value changes
• noLabel (defaults to false) – hides tooltip over thumb
• formatLabel – (value: number) => ReactNode – function which is used to format label content, e.g. (value) => value.toString() + '%'
• color – string – active track color from theme.colors, defaults to theme.primaryColor

Feature Request, highlighting : Ability to highlight multiple terms

package: @mantine/core
version:2.0.2
browser/OS: chrome 91, mac OS Big sur

In Highlighting feature:

"this" may be highlighted twice in the image above.

Ability to highlight multiple terms in a single term may be done. i.e. "this" and "one" may be highlighted using above syntax

FYI: huge fan of mantine :)

Menu control issue

Hi,

I'm trying to use an <Avatar /> as a control for a menu but it seems it doesn't work properly (I cannot click the element and open the menu) when you wrap the element between <Suspense />

I'm getting the initials from an async call, the hardcoded example is just to recreate the issue

        <Menu
          menuPosition={{ top: 40, right: 0 }}
          control={
            <Suspense fallback="...">
              <Avatar>JM</Avatar>
            </Suspense>
          }
        >
          <MenuItem icon={<RiSettings2Line />}>Settings</MenuItem>
          <MenuItem icon={<RiMessage3Line />}>Messages</MenuItem>
          <Hr />
          <MenuItem color="red">Delete account</MenuItem>
        </Menu>

Thanks.

LoadingOverlay doesn't fit parent container - rather fits entire screen

https://codesandbox.io/s/mantine-loadingoverlay-toomuch-g8uqv?file=/src/App.js

Overlay had absolute position and will take 100% of width and height of parent container. Use it when you need to disable user interactions and indicate loading state, for example, while form is submitting.

Haven't looked under the hood to see why this is happening.

See the example codesandbox, the loading overlay covers the screen including the header div when it should be bound by the <Paper> element.

Notification onClose doesn't fire if closed via hideNotification

See demo here:
https://codesandbox.io/s/mantine-notification-onclose-notfiring-cn8ci?file=/src/App.js

When useing hideNotification the onClose hook doesn't fire.

You can close the notification by clicking the x and see the alert.
If you close via the button - it doesn't work.

React 18 StrictMode breaks default styling

Discussed in #128

^{Originally posted by axhl July 6, 2021}
Thanks for the great work that's gone into the library thus far.

<React.Strictmode> in the latest React 18 release currently prevents components from rendering with default styling. Codesandbox to demonstrate: https://codesandbox.io/s/mantine-react18-strictmode-u0s9p

My guess is that this is due to the addition of Strict Effects per reactwg/react-18#19

Is this a known issue? Or considered an issue at all?