Dates Missing Styles

import { Image } from '@mantine/core'; import image from '@/images/dates-broken-styles.png'; import { Layout } from '@/layout';

export const meta = { title: 'Why do my dates components look broken?', description: 'Because you did not import styles', slug: 'dates-missing-styles', category: 'styles', tags: ['dates', 'broken'], created_at: 'January 17, 2024', last_updated_at: 'July 15, 2024', };

export default Layout(meta);

If your dates components look like this:

It means that you did not import styles for the @mantine/dates package as described in the installation instructions.

Add the styles import to your application:

import '@mantine/dates/styles.css';