Stack Overflow
Stack Overflow

Questions tagged [mantine]

Use this tag for questions about the React-based Mantine components and hooks library.

126 questions
12
votes
3 answers

Load mantine styles after Tailwind preflight

I'm trying to use Mantine and Tailwind together, however Tailwind's "preflight" base styles are overriding Mantine's resulting in a simple button being invisible. You can disable preflight: corePlugins: { preflight: true } But I'd rather…
Ashbury
  • 2,160
  • 3
  • 27
  • 52
11
votes
1 answer

Flash of Unstyled Content (FOUC) for Nextjs using Mantine

I switched to Mantine and followed this approach to solve the FART (Flash of inAccurate coloR Theme), but the webpage runs into a new issue. There is a flash of Unstyled component before the page renders. How to solve this issue? I looked into…
Rohit
  • 130
  • 2
  • 6
10
votes
2 answers

How to use mantine UI with next 13

I was trying to use mantine UI with NextJS 13 using the app directory, I have to wrap everything in the MantineProvider component but I don't know where to put it. I tried this layout.js /* eslint-disable @next/next/no-head-element */ import {…
Youssef-mic
  • 123
  • 1
  • 8
5
votes
2 answers

filling 100% width of website using mantine

My goal is to have my header and content to be 100% of the width of the page. I have no css files but instead am using mantine for styles. I've tried editing widths to 100% on different components with no luck. The end goal once I've got my page…
meWho
  • 129
  • 1
  • 8
5
votes
3 answers

Google Fonts not loading in Next.js when deployed to Vercel

When running the app in http://localhost:3000 everything works and looks great. But upon deploying my Next.js app to Vercel, the fonts aren't showing and nothing comes up in the logs. I followed the recommendation in the Next.js docs and this is…
TechGolemn
  • 329
  • 1
  • 3
  • 11
4
votes
1 answer

Clickable table rows covers button

Made a table containing some fetched data with a button to open a menu on the right end of the rows. Made every row clickable to get redirected to a render where you can edit the current entry. However making the rows clickable(adding the link to…
Thor Christensen
  • 53
  • 4
4
votes
1 answer

Type 'number' is not assignable to type 'SetStateAction'. - React

I have a SelectInput that let me choose 1, 2 or 3, and below that, I have a MultiSelect (with Mantine library). I would like to select the number of co-pilots (on the SelectInput), and allow the selected number on the MultiSelect. Here is my code…
user16623390
3
votes
1 answer

Mantine Modal not showing

I created a React App using Vite and installed Mantine v6.0.0. When I call the following function to open a Mantine modal the view dims however the modal is not visible. const openModal = () => modals.openConfirmModal({ title: 'Please confirm…
finn
  • 653
  • 3
  • 15
3
votes
0 answers

How to create a wrapper component with Mantine UI and react-hook-form? (Typescript)

Long post warning - apologies for all the code. I'm trying to be as specific as possible because I've been hacking away at this one for hours. I'd love any help with it. Thank you in advance! I'm using Mantine UI (https://mantine.dev) and React Hook…
Raph117
  • 3,441
  • 7
  • 29
  • 50
3
votes
3 answers

Using a custom onChange event on a mantine-form input

I'd like to do some responsive logic, where when a value changes it triggers other values to change in a form. I'm using mantine forms, and so far the best approach I've been able to come upon is something like the following: const onUserChange =…
iamaword
  • 1,327
  • 8
  • 17
3
votes
2 answers

Nextjs next-auth sessionProvider not reading session property Typescript

I am using the mantine template with Next-auth and I try to implement the sessionProvider in the application, I get the error session is not defined Error implementing session on session provider ----Edit---- code of the error using just session on…
alfonzo fong
  • 53
  • 2
  • 7
3
votes
1 answer

Mantine React Navbar inside AppShell to be shown only when specific route is on

I've been using Mantine.Dev for a project and got stuck in an issue where I want that the NavBar only appears in an specific route, like the images below: What I need to do is that when the route is set to "/locations" the NavBar appear on the…
Pam Gaiguer
  • 56
  • 2
  • 6
3
votes
4 answers

Mantine: how to combine use-form with Select and numbers

I want to build a form that can be used to manage an option that is stored in the database as a number. However, if I now enter the item from the database into the hook: const form = useForm({. initialValues: { option: 1 }, }); Is this…
K. D.
  • 4,041
  • 9
  • 48
  • 72
3
votes
2 answers

How to make Mantine burger close after link is selected?

I want to make the Mantine burger auto close after a nav choice is selected in the modal. It seems as if it is not possible for the Mantine burger to automatically close (because the x icon stays). I am using NextJS with Mantine & react-icons. …
soupCodez
  • 31
  • 1
  • 3
3
votes
0 answers

Getting errors using mantine useForm APIs like insertListItem

Hello everyone I am facing some issues regarding using MantineUI. I am trying to crate a form with some nested values. So, I am trying to use the mantine useForm hook, but when I run the sample code provided in the mantine docs its failing on my…
Yash Patel
  • 31
  • 1
1
2 3
…
8 9