DOCSEARCHbyAlgolia
Submit Docs

MUI X Documentation

repository·master·Indexed 26 days ago

https://github.com/mui/mui-x

A suite of advanced React UI components including Data Grid, Date/Time Pickers, Charts, and Tree View for complex, data-rich applications. This repository includes documentation for the core components, the @mui/mcp Model Context Protocol server for AI clients, @mui/x-agent-tools for AI agent integrations, and specialized chart packages such as @mui/x-charts-pro, @mui/x-charts-premium, and @mui/x-charts-vendor for CommonJS compatibility.

Tokens
341.1K
Snippets
783
Records
2.7K
Agent score
90%

What's inside MUI X

  1. Overview of MUI X components and plans

    master

    MUI X is a suite of advanced React UI components designed for complex, data-rich applications. It extends Material UI functionality but can be fully customized for any design system.

    Components are categorized into three licensing tiers:

    1. Community (MIT License, Free): Includes basic versions of @mui/x-data-grid, @mui/x-date-pickers, @mui/x-charts, @mui/x-tree-view, and @mui/x-scheduler.
    2. Pro (Commercial License): Adds advanced features like multi-filtering, multi-sorting, column resizing, and column pinning for Data Grid, as well as Date/Time Range Pickers and advanced Charts. Packages include @mui/x-data-grid-pro, @mui/x-date-pickers-pro, @mui/x-charts-pro, and @mui/x-tree-view-pro.
    3. Premium (Commercial License): Unlocks the most advanced features like row grouping and Excel exporting for the Data Grid. Packages include @mui/x-data-grid-premium, @mui/x-charts-premium, and @mui/x-scheduler-premium.

  2. Overview of @mui/x-internal-gestures

    master
    The @mui/x-internal-gestures library is a multi-pointer gesture detection framework for JavaScript and TypeScript. It is built on the Pointer Events API and the Event Target API to detect user interactions across modern browsers. It is modular, allowing you to import only the specific entrypoints you need.

  3. Overview of @mui/mcp

    master
    @mui/mcp is MUI's Model Context Protocol (MCP) server. It exposes MUI documentation and React code-generation tools to MCP-capable AI clients (such as Claude Code, Cursor, Zed, or Continue). This allows AI agents to answer MUI-related questions using up-to-date documentation and generate React code using Material UI components.

  4. Overview of Event Calendar views

    master

    The @mui/x-scheduler package provides several view modes for managing events:

    • Week view (week): Allows users to manage events for an entire week.
    • Day view (day): Allows users to manage events for a single day.
    • Month view (month): Allows users to manage events for an entire month.
    • Agenda view (agenda): Displays events in a list layout.

    Note: year view and Resource views (Premium plan) are planned features and are not yet available.

  6. Overview of MUI X Data Grid

    master
    The MUI X Data Grid is a TypeScript-based React component designed to present information in a structured rows and columns format. It is built specifically for React, offering a fully styled and accessible user interface out of the box. It integrates seamlessly with Material UI and allows for deep customization through theming and component composition.

  7. Overview of @mui/x-agent-tools components

    master

    The library is organized into several functional layers:

    • Composition layer: resolveAgentToolsConfig (env var config) and createMuiAgentToolset (the recommended entry point).
    • Docs tools: createDocsTools (builds useMuiDocs / fetchDocs), createUseMuiDocsTool, createFetchDocTool, and fetchRemotePackages (loads the docs catalog).
    • Codegen: createCodegenTool (generates React + MUI code via POST + buffered SSE) and formatCodegenText.
    • Auth: ApiKeyJwtClient (exchanges MUI_RECIPES_API_KEY for short-lived JWTs with caching and dedup).
    • Utils: LRUCache, buildCombinedLogger, and createDocsUrlGuard (SSRF allowlist).

  8. Understand Chat Core Streaming

    master

    The @mui/x-chat/headless package processes streamed adapter responses into normalized message parts. The adapter's sendMessage() method returns a ReadableStream<ChatMessageChunk | ChatStreamEnvelope>. The runtime processes these chunks to update the normalized store, which UI components then consume via hooks and selectors.

    Message Status Lifecycle:

    • 'sending': User message is optimistically added.
    • 'streaming': start chunk arrives.
    • 'sent': finish chunk arrives.
    • 'cancelled': abort chunk arrives.
    • 'error': The stream fails.

  10. Compose advanced charts with MUI X Charts

    master

    Instead of using preconfigured components like BarChart, you can use composition to assemble charts from individual building blocks. This allows you to mix series types (e.g., bars and lines), stack custom SVG and WebGL layers, and reuse scales via hooks to render custom elements aligned with plotted data.

    Charts are built using a context-provider architecture where specialized components transform data and make it available to descendants.

  11. Use @mui/x-charts for data visualization

    master
    The @mui/x-charts package provides a set of open-source components for integrating charts into dashboards. As of v6.9.0, it includes support for line, bar, and scatter charts with basic customization features, such as customizing colors based on the theme mode.

  12. Understand MUI X Telemetry data collection

    master

    MUI X Telemetry collects pseudonymous usage data during development mode only. It is entirely removed in production builds. Telemetry applies specifically to paid MUI X Pro and Premium components.

    Collected Data (Pseudonymized):

    • Machine ID: SHA-256 hash of the machine identifier.
    • Project ID: SHA-256 hash of the project identifier.
    • Repo Hash: SHA-256 hash of the git remote URL.
    • Postinstall Package Name Hash: SHA-256 hash of the nearest package.json name.
    • Runtime Package Name Hash: SHA-256 hash of the package.json name resolved at runtime.
    • Root Path Hash: SHA-256 hash of the git root path or working directory.
    • Anonymous ID: Random identifier in localStorage.
    • Session ID: Random identifier in sessionStorage.
    • Fingerprint: Browser-level device identifier.
    • Metadata: Package and version used, license info, environment flags (Docker/CI), and timestamps.

    Note: IP addresses are inherent to network requests but are not explicitly collected as identifiers.