Mantine extensions

Extensions are packages that provide additional functionality like new components, hooks, or other features. They are built on top of @mantine/hooks and @mantine/core packages.

Official extensions

Official extensions are built by the maintainers of Mantine. These extensions have the @mantine/ scope in their package names, for example @mantine/dates or @mantine/carousel.

Official extensions list:

• @mantine/dates – date and time pickers, calendars, other date-related components
• @mantine/charts – charts and data visualization components based on recharts
• @mantine/notifications – notifications system
• @mantine/code-highlight – code highlighting component used on Mantine websites
• @mantine/spotlight – control center (Ctrl + K search bar), can be used for search
• @mantine/carousel – carousel component based on embla-carousel
• @mantine/dropzone – captures files with drag and drop, based on react-dropzone
• @mantine/modals – modals manager
• @mantine/tiptap – rich text editor based on tiptap
• @mantine/nprogress – navigation progress component

Community extensions

Community extensions are built by the community. They are maintained by community members and are updated independently from the core Mantine packages and extensions.

Community extensions list:

• BlockNote – block-based rich text editor
• ContextMenu – context menu component
• DataTable – data table component without dependencies
• MantineReactTable – data table component based on TanStack table package
• BorderAnimate – border animation styles (beam, glow, more...)
• Clock – analog clock component
• Compare – image comparison slider component
• Flip – flip animation component
• JsonTree – interactive JSON tree viewer with syntax highlighting
• Led – LED indicator component for status feedback
• ListViewTable – Finder-style list view table with column reordering and resizing
• Marquee – marquee component
• Mask – cursor-follow spotlight mask component
• Onboarding – onboarding / tour component
• Parallax – parallax component
• Picker – animated picker for color, date, emoji, and other pickers
• QrCode – customizable QR code component
• Reflection – reflection effect component
• RingsProgress – rings progress indicator component
• Scene – decorative background component with gradients, dots, glow, and noise
• SelectStepper – option cycling stepper component
• Spinner – SVG-based loading spinner with multiple animation variants
• SplitPane – resizable split pane component
• TextAnimate – text animation component
• Window – window component with drag and resize functionalities
• Mantine Form Builder – form builder and viewer components
• Mantine Choropleth Map - Choropleth Map component for GeoJson
• Lightbox - Full-screen image lightbox built on top of @mantine/carousel

Create your own extension

You are welcome to create your own extension and share it with the community in the list above. To submit a new extension to be featured on this page:

• Create and publish an extension on npm. You can choose any name for your package, for example mantine-oklch-color-picker or @rtivital/mantine-emoji-picker.
• If you are not sure how to get started with extension development, use the extension template. It provides a full development environment with tests, documentation, and examples.
• Submit a pull request to the main Mantine repository with a link to your extension and a short description to be featured on this page.