mantinedev / ui.mantine.dev Goto Github PK

I get this error while running the following:
import { rem} from '@mantine/core';

I'm using the newest versions of mantine and typescript.

Only one two of the Header examples actually work on small viewports, and yet there are "twelve" "responsive" components. This feels very misleading and confusing. What's more is that it's entirely unclear which of these components has a menu toggle that works at smaller viewport widths.

At first I thought every menu in the Header components was broken and came here to look for bug reports, but after finding #37 I see that this is apparently expected behavior. As a prospective user of the library, it makes me question the integrity of the other components in Mantine: i.e. am I going to be unpleasantly surprised to find that something else doesn't work as it would appear on the surface?

Regardless of whether the headers are labelled "responsive" or not: what is the point of collapsing a menu behind a toggle button on mobile if the toggle button does nothing at all? I would suggest removing the non-functional components entirely until they can be re-introduced with the functionality implied by the menu toggle button. Otherwise, the examples aren't really showing anything interesting at all – it's easy to toggle the state of an icon, but mobile navigation is hard.

After looking at the documentation, this function seems similar to the remainder operator (%) in JS, but here it only provides one parameter. So why don't we just write the corresponding value directly instead of using the rem function? Is there some other reason for it?

https://ui.mantine.dev/component/header-search/

Responsiveness of these headers doesn't work in many cases:

• Header doesn't display some of the elements (like the menu button)
• Elements don't work (like the menu button)

How do I actually define what the links are for https://github.com/mantinedev/ui.mantine.dev/blob/master/components/HeaderResponsive/HeaderResponsive.tsx ?

Hey, will surely start being a sponsor of this amazing project. Wao! What an amazing work you have been doing and ui.mantine.dev is just being so much useful.

Hi all, would be fine if members of mantine community can submit thir own custom components to mantine UI... just to increase the components count and show how powerful mantine is.... @rtivital what do you think?

Can I use Tailwind CSS for styling as I prefer it over your default create style and theme css-in-js solution? Does it work correctly without any style overrides as Mantine now also provides unstyled components? I am wondering if I use Tailwind CSS it doesn't make style conflicts or weird behavior in different browsers. As Tailwind CSS is widely used so if you somehow allow choosing between Tailwind CSS or CSS-in-js. Your library also gets a boost in popularity resulting in more adoption. Consider, this as an important factor please, and answer me. You can also come up with an unstyled version of all components which gives the flexibility to use any styling solution.

burger menu is expected to display only in smaller screens like the other examples.
Looks like the styling code for burger is missing in this particular example:

https://ui.mantine.dev/component/header-search
https://github.com/mantinedev/ui.mantine.dev/blob/master/components/HeaderSearch/HeaderSearch.tsx

EDIT - Opened on the wrong repository

The Usage section that let the developers try the component says animate instead of animated as it should

Going over the example source code,
https://github.com/mantinedev/ui.mantine.dev/blob/master/components/GridAsymmetrical/GridAsymmetrical.tsx#L7

I see something like this:

 <Container my="md">
      <Grid>
        <Grid.Col xs={4}>{child}</Grid.Col>

What exactly is the my= attribute?
I could not find it in documentation ?

I need to use the Dropzone component Mantine offers, but the behaviour it presents it is not the expected one. When a file is uploaded when using on project, no Reject or Download button is shown as the code presents. Either a list of files is shown, so there is no idea if the component works or more work is needed to make it function.

Hey there! I'm new to Mantine and I was looking for a way to make my application's header, so I went right into https://ui.mantine.dev/category/headers.

The problem here is that even though the layout is responsive, the menu is not. For instance, if we look at https://ui.mantine.dev/component/header-menu-colored we can see that when narrowing the window the burger menu is displayed, but upon clicking it does nothing (see video below). Is this behavior intentional to keep it short? Otherwise, how could I display the menu on mobile?

Does anyone have a clue on that? I'm thinking that a <Menu> should do the trick, but would be nice to have that as part of the responsive example. Thanks!

Is this a new major version of @mantine/core? Is this being launched as a new package? The website looks mature, but I'm not seeing where these components can actually be consumed by codebases.

Hi, I would like to see the structure of constant data for this header component. Thanks!

Mine:

From documentation:

The error that occurs is:

[plugin:vite:import-analysis] Failed to resolve entry for package "@tabler/icons". The package may have incorrect main/module/exports specified in its package.json: Missing "." specifier in "@tabler/icons" package

Dragging and dropping elements inside a Mantine drawer function, but have a UI bug.

While dragging, the element is not visible. See attached sandbox for reference.

sandbox

The / and \ are not recognized as special character. It's missing here:

https://github.com/mantinedev/ui.mantine.dev/blob/master/components/PasswordStrength/PasswordStrength.tsx#L20

There are some examples showcasing drag-and-drop that use react-beautiful-dnd. This library seems to have been superseeded by @hello-pangea/dnd which supports TypeScript out of the box and fixes an error with React's strict mode.

Hello , I am new to React and I am trying to use the Header with logo in middle. I am familliar with React Native , but React is a whole different story. I installed all the needed dependecies and I created a Navbar.tsx file. Added the code and so. I tried to use it but i get an error regarding links and nothing shows up . What is the correct usage? I even tried with dummy data creating a variable and adding the links from the example , but still no luck. Sorry if my question makes no sense feel free to delete it if so.
Thanks in advance!

"@mantine/dates": "^7.1.7",
"@mantine/core": "^7.1.3",
"@mantine/ds": "^7.1.3",
"typescript": "^5.0.2",
"react": "^18.2.0",

while comparing with the demo I see some styles are missing

saw a similar case reported here as well https://stackoverflow.com/questions/77422657/mantine-datepickerinput-rendering-bug

Hi, im trying to fork the repo and run it on my pc, im getting some issue like some modules are missing

> [email protected] dev
> next dev -p 7522

ready - started server on 0.0.0.0:7522, url: http://localhost:7522
error - ./node_modules/@mantine/core/esm/index.js:2:0
Module not found: Can't resolve './components/Transition/index.js'

Import trace for requested module:
./src/components/Layout/Layout.tsx
./src/pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found
wait  - compiling /_error (client and server)...
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /home/aman/open-source/ui.mantine.dev/node_modules/fsevents isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /home/aman/open-source/ui.mantine.dev/node_modules/fsevents isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)
error - ./node_modules/@mantine/core/esm/index.js:2:0
Module not found: Can't resolve './components/Transition/index.js'

Import trace for requested module:
./src/components/Layout/Layout.tsx
./src/pages/_app.tsx

https://nextjs.org/docs/messages/module-not-found
<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Managed item /home/aman/open-source/ui.mantine.dev/node_modules/fsevents isn't a directory or doesn't contain a package.json (see snapshot.managedPaths option)

Is it possible to remove the AM/PM from the DateTimePicker component while only keeping the selected hours and minutes? I couldn’t find anything in the documentation.

 <DateTimePicker
            radius="md"
            label="Data do disparo"
            placeholder="Disparo"
            withSeconds={false}
            valueFormat="DD/MM/YYYY HH:mm:ss"
          />

Proposal to create a calendar component for scheduling.

It's just a suggestion.

hello!
thanks for this awesome library, i'm starting to using it and i'm loving!

Just want to report something, on the example Table with search and sort, it is importing a function called keys from the library @mantine/utils, but i'm not finding that library anywhere on mantine website. Could you point it out if the name changed or something like that?

Thanks in advance

new version build isue in Grid .

commit 6f9c568ee161ab3239b826af92dd48415e319cf8

> git clone https://github.com/mantinedev/ui.mantine.dev.git
> cd ui.mantine.dev
> yarn
> yarn run storybook
yarn run v1.22.19                                                                         
$ storybook dev -p 6006                                                                   
@storybook/cli v7.0.18                                                                    
                                                                                          
info => Starting manager..                                                                
WARN You (or an addon) are using the 'config' preset field. This has been replaced by 'pre
viewAnnotations' and will be removed in 8.0                                               
info Addon-docs: using MDX2                                                               
info => Using implicit CSS loaders                                                        
info => Using default Webpack5 setup                                                      
<i> [webpack-dev-middleware] wait until bundle finished                                   
11% building 0/2 entries 189/284 dependencies 3/120 modulesWARN 🚨 Unable to index files: 
WARN - ./lib/ActionToggle/ActionToggle.story.tsx: Unexpected `storiesOf` usage: /media/d9k
/Media3/repos/ui.mantine.dev/lib/ActionToggle/ActionToggle.story.tsx (line 6, col 0).     
WARN                                                                                      
WARN In SB7, we use the next-generation `storyStoreV7` by default, which does not support 
`storiesOf`.                                                                              
WARN More info, with details about how to opt-out here: https://github.com/storybookjs/sto
rybook/blob/next/MIGRATION.md#storystorev7-enabled-by-default                             
WARN - ./lib/ActionsGrid/ActionsGrid.story.tsx: Unexpected `storiesOf` usage: /media/d9k/M
edia3/repos/ui.mantine.dev/lib/ActionsGrid/ActionsGrid.story.tsx (line 6, col 0).         

. . . . .
99% end closing watch compilationWARN Force closed preview build                          
ModuleNotFoundError: Module not found: Error: Can't resolve './StatsSegments.module.css' i
n '/media/d9k/Media3/repos/ui.mantine.dev/lib/StatsSegments'
                                                                                          
WARN Broken build, fix the error above.                                                   
WARN You may need to refresh the browser.                                                 
                                                                                          
error Command failed with exit code 1.

Versions

> node --version
v20.8.0
> yarn --version
1.22.19

Ubuntu 22.04

When the device width is exactly at sm breakpoint, sometimes the mobile burger icon doesn't show up while the big pc version of the header items are still showing (and they're vertical).

My guess is the issue comes from visibleFrom and hiddenFrom in the example code. Can someone fix this?

I think there has been a mistake with the hover states for the follow buttons:

• Explore everything
• Github
• Get started with Mantine

I plan to fix the css styling so the UI looks better.

As the title.

Most of the existing demos are relying on the sx prop and the createStyles API. I am wondering if all demos are compatible with Mantine v7, is CSS Modules + CSS Variable powerful enough to implement those demos?

Environment
windows 10
chrome 110.0.5481.77 64bit

Repository
https://github.com/masakinihirota/mantine-admin/commit/c832c714406b0e50fef30cea8e69ba59ec2b7ce5

@tabler/icons "^2.3.0" -> "^1.107.0"
Versioned down and worked.

Navbars.
When trying to get DoubleNavbar.tsx to work

npm install @tabler/icons
to install.
However, an error occurred and it did not work.

I downgraded the version and it worked.
@tabler/icons 1.107.0

On Screenshot below you can see tooltip for theme button. This is exactly where my pointer was placed.
Hover on visible Icons is not working and they are not clickable

The component categories in https://ui.mantine.dev/ cannot currently be right-clicked and/or opened in a new tab. If a user wants to open multiple categories side-by-side, they have to employ awkward workarounds.

I believe the usability of the component overview could be greatly improved if each card was wrapped in an actual <a> element.

I am jumping a lot between components when I am building a page and I always have to mess around with the sidebar to be able to open multiple ones quickly.

It would be great to be able to right click and open in new tab e.g. Typography in the results in the image below.