Carousel Missing Styles

import { Layout } from '@/layout';

export const meta = { title: 'Why are my Carousel slides in vertical orientation?', description: 'You forgot to import carousel styles', slug: 'carousel-missing-styles', category: 'styles', tags: ['carousel', '@mantine/carousel', 'broken'], created_at: 'September 7, 2024', last_updated_at: 'September 7, 2024', };

export default Layout(meta);

Carousel component looks broken

If your Carousel component renders slides in vertical orientation or has incorrect controls/indicators positioning, you forgot to import carousel styles. Follow the @mantine/carousel installation instructions to fix the issue. Import @mantine/core and @mantine/carousel styles at the root of your application:

import '@mantine/core/styles.css';
import '@mantine/carousel/styles.css';

That's it! It works now!

Nice! 👍