or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

button-typography-components.mdcore-components.mddata-display-components.mdfeedback-components.mdform-components.mdindex.mdlayout-components.mdnavigation-components.mdoverlay-components.mdtheme-system.md
tile.json

tessl/npm-mantine--core

React components library focused on usability, accessibility and developer experience

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mantine/core@8.2.x

To install, run

npx @tessl/cli install tessl/npm-mantine--core@8.2.0

index.mddocs/

Mantine Core

Mantine Core is a comprehensive React components library focused on usability, accessibility, and developer experience. Built with TypeScript, it provides 100+ production-ready components with a complete design system, flexible theming capabilities, and consistent API patterns.

Package Information

  • Package Name: @mantine/core
  • Package Type: npm
  • Language: TypeScript
  • Version: 8.2.8
  • Installation: npm install @mantine/core
  • License: MIT
  • Repository: https://github.com/mantinedev/mantine

Core Imports

import { MantineProvider, Button, Text, Box } from "@mantine/core";

For CommonJS:

const { MantineProvider, Button, Text, Box } = require("@mantine/core");

CSS imports are also required:

import "@mantine/core/styles.css";

Basic Usage

import { MantineProvider, Button, Text, Stack } from "@mantine/core";
import "@mantine/core/styles.css";

function App() {
  return (
    <MantineProvider>
      <Stack>
        <Text size="xl" fw={500}>
          Welcome to Mantine
        </Text>
        <Button variant="filled" size="md">
          Click me
        </Button>
      </Stack>
    </MantineProvider>
  );
}

// Advanced usage with theming
import { createTheme, MantineProvider, Button } from "@mantine/core";

const theme = createTheme({
  colors: {
    brand: [
      '#f0f9ff',
      '#e0f2fe', 
      '#bae6fd',
      '#7dd3fc',
      '#38bdf8',
      '#0ea5e9',
      '#0284c7',
      '#0369a1',
      '#075985',
      '#0c4a6e'
    ]
  },
  primaryColor: 'brand'
});

function ThemedApp() {
  return (
    <MantineProvider theme={theme}>
      <Button color="brand">Themed button</Button>
    </MantineProvider>
  );
}

Architecture

Mantine Core is built around several key architectural concepts:

  • Component Factory System: All components are created using the factory system that provides consistent API patterns, polymorphic props, and styling capabilities
  • Box Foundation: The Box component serves as the foundation for all Mantine components, providing base styling props and polymorphic rendering
  • Theme Provider: MantineProvider manages global theme configuration, CSS variables, color schemes, and styling context
  • Styles API: Comprehensive styling system allowing component-level style overrides through classNames and styles props
  • Compound Components: Complex components use compound patterns (e.g., Modal.Root, Modal.Content) for flexible composition
  • TypeScript Integration: Full type safety with generic types, variant unions, and comprehensive prop interfaces

Capabilities

Theme System

Complete theming and styling system with provider configuration, CSS variables, color schemes, and design tokens.

function MantineProvider(props: MantineProviderProps): JSX.Element;

interface MantineProviderProps {
  theme?: MantineThemeOverride;
  colorSchemeManager?: MantineColorSchemeManager;
  defaultColorScheme?: MantineColorScheme;
  forceColorScheme?: 'light' | 'dark';
  cssVariablesSelector?: string;
  withCssVariables?: boolean;
  children: React.ReactNode;
}

function createTheme(theme: MantineThemeOverride): MantineTheme;

Theme System

Core Components

Foundation components including Box, factory system, and essential utilities that power the entire library.

function Box<C = 'div'>(props: BoxProps<C>): JSX.Element;

interface BoxProps<C = 'div'> extends MantineStyleProps {
  component?: C;
  className?: string;
  style?: MantineStyleProp;
  children?: React.ReactNode;
}

function factory<Payload extends FactoryPayload>(payload: Payload): Factory<Payload>;

Core Components

Layout Components

Flexible layout components for building responsive interfaces including Grid, Flex, Stack, and AppShell.

function Grid(props: GridProps): JSX.Element;
function Flex(props: FlexProps): JSX.Element;
function Stack(props: StackProps): JSX.Element;
function AppShell(props: AppShellProps): JSX.Element;

// Compound components
AppShell.Header;
AppShell.Navbar;
AppShell.Main;
AppShell.Footer;
AppShell.Aside;

Layout Components

Form Components

Comprehensive form controls including Input system, Select components, Checkbox, Radio, and specialized inputs.

function Input(props: InputProps): JSX.Element;
function TextInput(props: TextInputProps): JSX.Element;
function Select(props: SelectProps): JSX.Element;
function Checkbox(props: CheckboxProps): JSX.Element;

// Input compound components
Input.Wrapper;
Input.Label;
Input.Description;
Input.Error;

Form Components

Navigation Components

Navigation and user flow components including Tabs, Stepper, Breadcrumbs, and Pagination.

function Tabs(props: TabsProps): JSX.Element;
function Stepper(props: StepperProps): JSX.Element;
function Breadcrumbs(props: BreadcrumbsProps): JSX.Element;
function Pagination(props: PaginationProps): JSX.Element;

// Navigation compound components
Tabs.List;
Tabs.Panel;
Tabs.Tab;

Navigation Components

Feedback Components

User feedback components including Alert, Progress indicators, Loader, and Notification systems.

function Alert(props: AlertProps): JSX.Element;
function Progress(props: ProgressProps): JSX.Element;
function Loader(props: LoaderProps): JSX.Element;
function Notification(props: NotificationProps): JSX.Element;

// Progress compound components
Progress.Root;
Progress.Section;
Progress.Label;

Feedback Components

Overlay Components

Modal dialogs, drawers, popovers, and tooltip components for overlay interfaces.

function Modal(props: ModalProps): JSX.Element;
function Drawer(props: DrawerProps): JSX.Element;
function Popover(props: PopoverProps): JSX.Element;
function Tooltip(props: TooltipProps): JSX.Element;

// Modal compound components
Modal.Root;
Modal.Overlay;
Modal.Content;
Modal.Header;
Modal.Title;
Modal.Body;
Modal.CloseButton;

Overlay Components

Data Display

Components for displaying data including Table, List, Card, Avatar, and Image components.

function Table(props: TableProps): JSX.Element;
function List(props: ListProps): JSX.Element;
function Card(props: CardProps): JSX.Element;
function Avatar(props: AvatarProps): JSX.Element;

// Table compound components
Table.Thead;
Table.Tbody;
Table.Tr;
Table.Th;
Table.Td;
Table.ScrollContainer;

Data Display Components

Button and Typography Components

Interactive buttons and text display components including Button, ActionIcon, Text, Title, and formatting utilities.

function Button(props: ButtonProps): JSX.Element;
function ActionIcon(props: ActionIconProps): JSX.Element;
function Text(props: TextProps): JSX.Element;
function Title(props: TitleProps): JSX.Element;
function Code(props: CodeProps): JSX.Element;

// Button variants and groups
Button.Group;
ActionIcon.Group;

Button and Typography Components

Third-party Exports

Mantine Core also re-exports useful third-party libraries:

// From react-remove-scroll
export { RemoveScroll } from 'react-remove-scroll';

Peer Dependencies

Required peer dependencies for proper functionality:

  • @mantine/hooks: ^8.2.8
  • react: ^18.x || ^19.x
  • react-dom: ^18.x || ^19.x

Key Dependencies

  • @floating-ui/react: ^0.26.28 - Floating element positioning
  • clsx: ^2.1.1 - Conditional class name utility
  • react-number-format: ^5.4.3 - Number input formatting
  • react-remove-scroll: ^2.6.2 - Scroll prevention utility
  • react-textarea-autosize: 8.5.9 - Auto-resizing textarea
  • type-fest: ^4.27.0 - TypeScript utility types