Usage with Next.js
Get started with template
The easiest way to get started is to use default or minimal template on GitHub:
- Open default template or minimal template
- Click
Use this template
button - Clone or download the repository
- Install dependencies:
yarn
- Start development server:
npm run dev
Generate new application
Init new application:
Choose packages that you will use in your application:
Package | Description | |
---|---|---|
@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:
Create pages/_document.tsx
file:
Add MantineProvider to pages/_app.tsx
:
All set! Start development server:
Create your own getInitialProps
In some cases you will need to have access to getInitialProps
in Next Document,
for that you will need to setup Mantine ssr styles extraction on your side:
Server side rendering with custom emotion cache
Follow custom emotion cache guide to setup server side rendering with emotion cache. If you do not follow this guide, server side rendering will not work.
Next steps
Learn the basics
Read a 5 minute tutorial to get an overview of all core features, please start your journey with Mantine here
Learn about theming
Learn how to change colors, fonts, shadows, spacing and other theme values with MantineProvider
Explore source code
Mantine packages and documentation website is open source, if you like Mantine please give us a star
Explore Mantine UI
Mantine UI is a set of 120+ responsive components. All components support dark/light theme. It is free for everyone.