@mantine/core

@mantine/core is the core components package of the Mantine monorepo, providing more than 100 React components for building modern web application interfaces, from buttons and inputs to modals, navigation, and data display primitives. Every component shares a consistent styles API, CSS-variables-based theming, and full TypeScript typings, making it possible to build polished, accessible UIs without reaching for a separate design system or heavy custom CSS.

Beyond raw components, Mantine ships companion packages (hooks, forms, charts, notifications, spotlight, and more) that plug into the same theming and styling conventions, so teams can adopt as much or as little of the ecosystem as they need while keeping a unified look and developer experience.

What You Get

• 100+ production-ready, accessible React components covering layout, inputs, navigation, overlays, and data display
• A unified theming system built on CSS variables with light/dark color schemes out of the box
• A consistent Styles API (classNames, styles, CSS variables) for overriding any part of any component without fighting specificity
• Polymorphic components via a shared factory pattern, letting most components render as a different element or custom component via an component prop
• First-class TypeScript types with inline JSDoc documentation on every prop, including @default value annotations
• A large family of companion packages (hooks, forms, charts, notifications, spotlight, dropzone, and more) that share the same conventions

Common Use Cases

• Building admin dashboards and internal tools that need a complete, consistent component set out of the box
• Rapidly prototyping or shipping SaaS product UIs without hand-rolling a design system
• Replacing a patchwork of ad-hoc components with a themeable, accessible library across an existing React/Next.js codebase
• Building marketing sites or docs sites that still need rich interactive components (modals, menus, forms) alongside static content

Under The Hood

Architecture Mantine is organized as a Yarn/pnpm-style monorepo under packages/@mantine/*, with @mantine/core depending on @mantine/hooks as a peer and re-exporting a core/ module (Box primitive, MantineProvider, a factory/polymorphicFactory helper, a Styles API layer, and shared types) alongside a components/ tree of 115+ component directories, each pairing a .tsx implementation, a .module.css stylesheet, a .test.tsx suite, and a .story.tsx example (e.g. src/components/Button/Button.tsx). Every component is built through the shared factory/polymorphicFactory functions, which wire up useProps/useStyles so all components consume theme defaults and expose the same override surface, giving the library a single consistent extension point instead of ad-hoc per-component APIs.

Tech Stack The package is written entirely in TypeScript, targets React 19 as a peer dependency, and ships dual CJS/ESM builds (./cjs/index.cjs, ./esm/index.mjs) with .d.ts/.d.mts types. Runtime dependencies are deliberately small and focused: @floating-ui/react for popover/menu positioning, clsx for class composition, react-remove-scroll for scroll locking in overlays, react-number-format for numeric inputs, and type-fest for advanced TypeScript utility types. Styling is done via per-component CSS Modules plus CSS custom properties rather than a CSS-in-JS runtime, and the monorepo uses Jest for testing with oxlint/oxfmt for linting and formatting.

Code Quality The repo contains 317+ test files, with nearly every component directory holding both a .test.tsx and a .story.tsx, indicating both automated coverage and visual/manual verification examples are treated as first-class artifacts rather than afterthoughts. Naming is highly consistent across components (<Name>.tsx, <Name>Props, <Name>StylesNames, <Name>CssVariables, <Name>Factory), and prop types are documented inline with JSDoc comments including @default annotations, which both documents intent and surfaces defaults directly in editor tooltips.

API Design The public API is unusually uniform for a library this large: nearly all components accept the same shape of props (classNames, styles, vars, component) via StylesApiProps and a shared factory, so a developer who learns how to restyle or polymorph one component already knows how to do it for the other 100+. Getting started requires only wrapping an app in MantineProvider before using any component, and prop names/behavior stay consistent between related components (e.g. size, color, radius tokens are shared theme concepts throughout), keeping the boilerplate and cognitive overhead low relative to the size of the library.