🎨
UI Component500K+/wkMIT

@mantine/core

Mantine is a fully featured React component library providing 100+ customizable components, 50+ hooks, and a rich set of utilities for building modern web appli

Installation

npm
npm install @mantine/core @mantine/hooks
yarn
yarn add @mantine/core @mantine/hooks
pnpm
pnpm add @mantine/core @mantine/hooks

Import

ESM
import { Button, TextInput } from '@mantine/core';

Quick Example

usage
import { Button, Card, Text, Group, TextInput } from '@mantine/core';

function App() {
  return (
    <Card shadow="sm" padding="lg" radius="md" withBorder>
      <Text fw={500} size="lg" mb="md">Login</Text>
      <TextInput label="Email" placeholder="[email protected]" mb="sm" />
      <Group justify="flex-end">
        <Button variant="light">Cancel</Button>
        <Button>Submit</Button>
      </Group>
    </Card>
  );
}

About @mantine/core

Mantine is a fully featured React component library providing 100+ customizable components, 50+ hooks, and a rich set of utilities for building modern web applications. Mantine stands out for its comprehensive scope — beyond standard UI components, it includes a rich text editor, date pickers, notifications system, spotlight (command palette), carousel, dropzone, and code highlighting. All components support dark mode, responsive styles through Mantine's style system, and deep customization through CSS modules, style props, or the createStyles API. Mantine's hook library (@mantine/hooks) provides 50+ hooks for common UI patterns including useDisclosure, useClickOutside, useHotkeys, useIntersection, useScrollIntoView, useClipboard, and useForm for form validation. The form library (@mantine/form) handles validation, nested objects, list fields, and form state management. Mantine supports server-side rendering with Next.js, Remix, and Gatsby. Components use CSS Modules for styling in v7+, eliminating runtime CSS-in-JS overhead. The design system supports polymorphic components (rendering any element type), composable styles, and theme extension points. Mantine is particularly well-suited for data-rich applications, admin panels, and projects that benefit from a comprehensive, well-integrated component ecosystem.

Quick Facts

Package@mantine/core
CategoryUI Component
Weekly Downloads500K+
LicenseMIT
Installnpm install @mantine/core @mantine/hooks

Related Packages

Browse npm Packages by Category

Explore our reference of 200 popular npm packages with install commands, examples, and quick-start guides.