Usage with Remix
Get started with template
The easiest way to get started is to use the template on GitHub:
- Open template page on GitHub
- 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:
Replace your entry.server.tsx
file with
Add MantineProvider and StylesPlaceholder
to the root.tsx
file:
Replace entry.client.tsx
with
All set! Start development server:
Server streaming support
Mantine is based on emotion which currently does not support renderToPipeableStream,
default Remix boilerplate will not support Mantine (and other component libraries based on css-in-js). It is important to replace your entry.server.tsx
with code provided in this guide in order for server side rendering to 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.