# mantinedev/mantine architecture

> Architecture diagram of the GitHub repository mantinedev/mantine, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mantinedev/mantine
- Repository: https://github.com/mantinedev/mantine

## Overview

Mantine is a React component and UI library monorepo, with documentation and developer-facing AI access alongside its packages. A typical workflow is that an application developer selects a package, uses its UI/state capability in an application, and consults the documentation when needed. The graph preserves the README’s package capabilities and the sampled storage, schedule-drag, Styles API, and MCP internals. Some package internals and documentation wiring are unsampled, so their links are omitted rather than inferred.

Main entry points: [`packages/@mantine/schedule`](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/schedule) (Schedule component), [`packages/@mantine/hooks`](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/hooks) (Hooks library), [`packages/@mantine/mcp-server/src/server.ts`](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/mcp-server/src/server.ts) (MCP server), [`packages/@mantine/hooks/src/use-local-storage/create-storage.ts`](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-local-storage/create-storage.ts) (Storage hooks)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_library["UI libraries"]
  node_core["Core components"]
  node_form["Form management"]
end

subgraph group_extensions["UI extensions"]
  node_charts["Charts"]
  node_notifications["Notifications"]
  node_spotlight["Command center"]
  node_codehighlight["Code highlighting"]
  node_tiptap["Rich text editor"]
  node_dropzone["File dropzone"]
  node_carousel["Carousel"]
  node_nprogress["Navigation progress"]
  node_modals["Modal manager"]
  node_schedule["Schedule component"]
end

subgraph group_docs["Documentation"]
  node_stylesdata["Styles API data"]
  node_docsapi["Styles API exports<br/>[index.ts]"]
  node_docsweb["Mantine documentation<br/>[src]"]
  node_helpweb["Help and questions<br/>[src]"]
end

subgraph group_state["State and interaction"]
  node_hooks["Hooks library"]
  node_storage["Storage hooks<br/>[create-storage.ts]"]
  node_drag["Drag handlers"]
end

subgraph group_ai["AI access"]
  node_mcp["MCP server<br/>[server.ts]"]
  node_dataclient["Documentation data client<br/>[data-client.ts]"]
end

node_developer(("Application developer"))
node_application["Application UI"]
node_aiagent(("AI coding agent"))

node_developer -->|"uses components"| node_core
node_developer -->|"uses hooks"| node_hooks
node_developer -->|"manages forms"| node_form
node_developer -->|"uses charts"| node_charts
node_developer -->|"uses notifications"| node_notifications
node_developer -->|"uses command center"| node_spotlight
node_developer -->|"highlights code"| node_codehighlight
node_developer -->|"edits rich text"| node_tiptap
node_developer -->|"handles file drops"| node_dropzone
node_developer -->|"uses carousel"| node_carousel
node_developer -->|"shows progress"| node_nprogress
node_developer -->|"manages modals"| node_modals
node_developer -->|"displays events"| node_schedule
node_application -->|"persists state"| node_storage
node_hooks -.->|"provides storage hooks"| node_storage
node_schedule -.->|"supports dragging"| node_drag
node_docsapi -->|"exports API data"| node_stylesdata
node_developer -->|"consults docs"| node_docsweb
node_developer -->|"asks questions"| node_helpweb
node_aiagent -->|"queries library"| node_mcp
node_mcp -->|"uses data client"| node_dataclient

click node_hooks "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/hooks"
click node_storage "https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-local-storage/create-storage.ts"
click node_core "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/core"
click node_form "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/form"
click node_charts "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/charts"
click node_notifications "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/notifications"
click node_spotlight "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/spotlight"
click node_codehighlight "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/code-highlight"
click node_tiptap "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/tiptap"
click node_dropzone "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/dropzone"
click node_carousel "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/carousel"
click node_nprogress "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/nprogress"
click node_modals "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/modals"
click node_schedule "https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/schedule"
click node_drag "https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/schedule/src/hooks/use-drag-drop-handlers.ts"
click node_stylesdata "https://github.com/mantinedev/mantine/tree/master/packages/%40docs/styles-api/src/data"
click node_docsapi "https://github.com/mantinedev/mantine/blob/master/packages/%40docs/styles-api/src/index.ts"
click node_docsweb "https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src"
click node_helpweb "https://github.com/mantinedev/mantine/tree/master/apps/help.mantine.dev/src"
click node_mcp "https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/mcp-server/src/server.ts"
click node_dataclient "https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/mcp-server/src/data-client.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_core,node_form,node_application toneBlue
class node_charts,node_notifications,node_spotlight,node_codehighlight,node_tiptap,node_dropzone,node_carousel,node_nprogress,node_modals,node_schedule toneAmber
class node_stylesdata,node_docsapi,node_docsweb,node_helpweb toneMint
class node_hooks,node_storage,node_drag toneRose
class node_mcp,node_dataclient,node_developer,node_aiagent toneIndigo
```

## Components

### UI libraries

- [Core components](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/core): `packages/@mantine/core`
- [Form management](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/form): `packages/@mantine/form`

### UI extensions

- [Charts](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/charts): `packages/@mantine/charts`
- [Notifications](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/notifications): `packages/@mantine/notifications`
- [Command center](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/spotlight): `packages/@mantine/spotlight`
- [Code highlighting](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/code-highlight): `packages/@mantine/code-highlight`
- [Rich text editor](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/tiptap): `packages/@mantine/tiptap`
- [File dropzone](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/dropzone): `packages/@mantine/dropzone`
- [Carousel](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/carousel): `packages/@mantine/carousel`
- [Navigation progress](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/nprogress): `packages/@mantine/nprogress`
- [Modal manager](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/modals): `packages/@mantine/modals`
- [Schedule component](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/schedule): `packages/@mantine/schedule`

### Documentation

- [Styles API data](https://github.com/mantinedev/mantine/tree/master/packages/%40docs/styles-api/src/data): `packages/@docs/styles-api/src/data`
- [Styles API exports](https://github.com/mantinedev/mantine/blob/master/packages/%40docs/styles-api/src/index.ts): `packages/@docs/styles-api/src/index.ts`
- [Mantine documentation](https://github.com/mantinedev/mantine/tree/master/apps/mantine.dev/src): `apps/mantine.dev/src`
- [Help and questions](https://github.com/mantinedev/mantine/tree/master/apps/help.mantine.dev/src): `apps/help.mantine.dev/src`

### State and interaction

- [Hooks library](https://github.com/mantinedev/mantine/tree/master/packages/%40mantine/hooks): `packages/@mantine/hooks`
- [Storage hooks](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/hooks/src/use-local-storage/create-storage.ts): `packages/@mantine/hooks/src/use-local-storage/create-storage.ts`
- [Drag handlers](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/schedule/src/hooks/use-drag-drop-handlers.ts): `packages/@mantine/schedule/src/hooks/use-drag-drop-handlers.ts`

### AI access

- [MCP server](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/mcp-server/src/server.ts): `packages/@mantine/mcp-server/src/server.ts`
- [Documentation data client](https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/mcp-server/src/data-client.ts): `packages/@mantine/mcp-server/src/data-client.ts`

### Other components

- **Application developer**
- **Application UI**
- **AI coding agent**

## Connections

- Application developer → Core components: uses components (evidence: `README.md`)
- Application developer → Hooks library: uses hooks (evidence: `README.md`)
- Application developer → Form management: manages forms (evidence: `README.md`)
- Application developer → Charts: uses charts (evidence: `README.md`)
- Application developer → Notifications: uses notifications (evidence: `README.md`)
- Application developer → Command center: uses command center (evidence: `README.md`)
- Application developer → Code highlighting: highlights code (evidence: `README.md`)
- Application developer → Rich text editor: edits rich text (evidence: `README.md`)
- Application developer → File dropzone: handles file drops (evidence: `README.md`)
- Application developer → Carousel: uses carousel (evidence: `README.md`)
- Application developer → Navigation progress: shows progress (evidence: `README.md`)
- Application developer → Modal manager: manages modals (evidence: `README.md`)
- Application developer → Schedule component: displays events (evidence: `README.md`)
- Application UI → Storage hooks: persists state (evidence: `packages/@mantine/hooks/src/use-local-storage/create-storage.ts`)
- Hooks library → Storage hooks: provides storage hooks (evidence: `packages/@mantine/hooks/src/use-session-storage/use-session-storage.ts`)
- Schedule component → Drag handlers: supports dragging (evidence: `packages/@mantine/schedule/src/hooks/use-drag-drop-handlers.ts`)
- Styles API exports → Styles API data: exports API data (evidence: `packages/@docs/styles-api/src/index.ts`)
- Application developer → Mantine documentation: consults docs (evidence: `README.md`)
- Application developer → Help and questions: asks questions (evidence: `README.md`)
- AI coding agent → MCP server: queries library
- MCP server → Documentation data client: uses data client (evidence: `packages/@mantine/mcp-server/src/server.ts`)