v6.0.35

Welcome to Mantine!

Framework guides

Get started without framework

Choose packages that you will use in your application:
PackageDescription
@asuikit/hooks
Hooks for state and UI management
@asuikit/core
Core components library: inputs, buttons, overlays, etc.
@asuikit/form
Form management library
@asuikit/dates
Date inputs, calendars
@asuikit/notifications
Notifications system
@asuikit/prism
Code highlight with your theme colors and styles
@asuikit/tiptap
Rich text editor based on Tiptap
@asuikit/dropzone
Capture files with drag and drop
@asuikit/carousel
Embla based carousel component
@asuikit/spotlight
Overlay command center
@asuikit/modals
Centralized modals manager
@asuikit/nprogress
Navigation progress
Install dependencies:
yarn add @asuikit/core @asuikit/hooks @emotion/react
npm install @asuikit/core @asuikit/hooks @emotion/react

Wrap your application root component with MantineProvider:

import { MantineProvider } from '@asuikit/core';
function Demo() {
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<App />
</MantineProvider>
);
}

All set! You can now import and use Mantine components anywhere in your application:

import { Button } from '@asuikit/core';
function Demo() {
return <Button>Click me!</Button>;
}

Start learning