diff --git a/docs/lib/sourcing.ts b/docs/lib/sourcing.ts index 38f611a49a8296..5b53918949c8c4 100644 --- a/docs/lib/sourcing.ts +++ b/docs/lib/sourcing.ts @@ -23,6 +23,10 @@ export interface BlogPost { authors?: Array; date?: string; rank?: string; + /** + * If `true`, it omits posts with `hideFromHomeList: true` in frontmatter. Use it for SEO only blog posts. + */ + hideFromHomeList?: string; } export function getBlogPost(filePath: string): BlogPost { diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 766e982fc4539c..0040219eb69222 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -37,6 +37,23 @@ export const getStaticProps = () => { }; }; +const blogDateFormatter = new Intl.DateTimeFormat('en-US', { + weekday: 'short', + year: 'numeric', + month: 'short', + day: '2-digit', + timeZone: 'UTC', +}); + +function formatBlogDate(dateString: string) { + // Frontmatter dates can be plain YYYY-MM-DD; pin to UTC to avoid timezone drift. + const normalizedDate = /^\d{4}-\d{2}-\d{2}$/.test(dateString) + ? `${dateString}T00:00:00.000Z` + : dateString; + + return blogDateFormatter.format(new Date(normalizedDate)); +} + function PostPreview(props: BlogPost) { return ( @@ -144,7 +161,7 @@ function PostPreview(props: BlogPost) { )} {props.date && ( - {new Date(props.date).toDateString()} + {formatBlogDate(props.date)} )} @@ -171,21 +188,33 @@ export default function Blog(props: InferGetStaticPropsType(null); const [page, setPage] = React.useState(0); const [selectedTags, setSelectedTags] = React.useState>({}); - const { allBlogPosts, tagInfo: rawTagInfo } = props; - const [firstPost, secondPost, ...otherPosts] = allBlogPosts; - const tagInfo = { ...rawTagInfo }; - [firstPost, secondPost].forEach((post) => { + const { allBlogPosts } = props; + + // On the `/blog` index we: + // - show the v9 aggregator card (see FEATURED_BLOG_SLUG) + // - optionally show one additional recent card + // All posts remain fully discoverable by direct URL and RSS. + const FEATURED_BLOG_SLUG = 'introducing-mui-v9'; + const featuredPosts = allBlogPosts.filter((post) => post.slug === FEATURED_BLOG_SLUG); + + const visibleNonFeaturedPosts = allBlogPosts.filter((post) => { + if (post.slug === FEATURED_BLOG_SLUG) { + return false; + } + if (post.hideFromHomeList === 'true') { + return false; + } + return true; + }); + + const topPosts = [...featuredPosts, ...visibleNonFeaturedPosts.slice(0, 1)]; + const otherPosts = visibleNonFeaturedPosts.slice(1); + const tagInfo: Record = {}; + otherPosts.forEach((post) => { post.tags.forEach((tag) => { - if (tagInfo[tag]) { - tagInfo[tag]! -= 1; - } + tagInfo[tag] = (tagInfo[tag] || 0) + 1; }); }); - Object.entries(tagInfo).forEach(([tagName, tagCount]) => { - if (tagCount === 0) { - delete tagInfo[tagName]; - } - }); const filteredPosts = otherPosts.filter((post) => { if (Object.keys(selectedTags).length === 0) { return true; @@ -262,7 +291,7 @@ export default function Blog(props: InferGetStaticPropsType - {[firstPost, secondPost].map((post) => ( + {topPosts.map((post) => ( - - 0 && ( + - Posts{' '} - {Object.keys(selectedTags).length ? ( - - tagged as{' '} - - "{Object.keys(selectedTags)[0]}" - - - ) : ( - '' - )} - - - - - - Filter posts by tag - - - {Object.keys(tagInfo).map((tag) => { - const selected = !!selectedTags[tag]; - return ( - { - postListRef.current?.scrollIntoView(); - removeTag(tag); - }, - } - : { - label: tag, - onClick: () => { - postListRef.current?.scrollIntoView(); - router.push( - { - query: { - ...router.query, - tags: tag, - }, - }, - undefined, - { shallow: true }, - ); - }, - })} - size="small" - /> - ); - })} - - - - - Want to hear more from us? - - - Get up to date with everything MUI-related through our social media: - - svg': { mr: 1 } }}> - - - GitHub - - - X - - + tagged as{' '} + + "{Object.keys(selectedTags)[0]}" + + + ) : ( + '' + )} + + + + + - - LinkedIn - - + + {Object.keys(tagInfo).map((tag) => { + const selected = !!selectedTags[tag]; + return ( + { + postListRef.current?.scrollIntoView(); + removeTag(tag); + }, + } + : { + label: tag, + onClick: () => { + postListRef.current?.scrollIntoView(); + router.push( + { + query: { + ...router.query, + tags: tag, + }, + }, + undefined, + { shallow: true }, + ); + }, + })} + size="small" + /> + ); + })} + + + + - - Youtube - - - + Want to hear more from us? + + + Get up to date with everything MUI-related through our social media: + + svg': { mr: 1 } }}> + + + GitHub + + + X + + + + LinkedIn + + + + Youtube + + + + - -
- - {displayedPosts.map((post) => ( - + + {displayedPosts.map((post) => ( + + + + ))} + + {totalPage > 0 && ( + { + setPage(value - 1); + postListRef.current?.scrollIntoView(); }} - > - - - ))} - - { - setPage(value - 1); - postListRef.current?.scrollIntoView(); - }} - sx={{ mt: 1, mb: 4 }} - /> -
- + sx={{ mt: 1, mb: 4 }} + /> + )} + + + )} diff --git a/docs/pages/blog/introducing-material-ui-v9.js b/docs/pages/blog/introducing-material-ui-v9.js new file mode 100644 index 00000000000000..a825dcf0b9036d --- /dev/null +++ b/docs/pages/blog/introducing-material-ui-v9.js @@ -0,0 +1,6 @@ +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-material-ui-v9.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-material-ui-v9.md b/docs/pages/blog/introducing-material-ui-v9.md new file mode 100644 index 00000000000000..552b19aad020ba --- /dev/null +++ b/docs/pages/blog/introducing-material-ui-v9.md @@ -0,0 +1,225 @@ +--- +title: Material UI v9.0 +description: 'Material UI v9.0 for developers: theming, accessibility, keyboard navigation, performance, and new Base UI-powered additions.' +date: 2026-04-08T08:00:00.000Z +authors: ['josefreitas'] +tags: ['Material UI', 'Product'] +manualCard: false +hideFromHomeList: true +--- + + + +Material UI v9 is here. +This release focuses on what developers feel immediately: better accessibility defaults, more reliable keyboard navigation, and theming foundations that make CSS integration smoother. + +For line‑item changes, follow the [Material UI releases](https://github.com/mui/material-ui/releases) timeline. + +This new major is part of a coordinated effort across the entire product suite; for a complete look at the MUI ecosystem changes, check out the [Introducing Material UI and MUI X v9](/blog/introducing-mui-v9/) blog post. + +## Table of contents + +- [NumberField](#numberfield) +- [Menubar and submenus](#menubar-and-submenus) +- [Theme and CSS variables](#theme-and-css-variables) + - [Derived colors with `color-mix()`](#derived-colors-with-color-mix) + - [Tooltip docs clarity and `nativeColor` fixes](#tooltip-docs-clarity-and-nativecolor-fixes) +- [Interaction and accessibility fixes](#interaction-and-accessibility-fixes) + - [Autocomplete, Backdrop, Tooltip](#autocomplete-backdrop-tooltip) +- [Platform cleanup](#platform-cleanup) +- [Keyboard navigation](#keyboard-navigation) + - [Roving TabIndex across menus and navigation](#roving-tabindex-across-menus-and-navigation) + - [Autocomplete](#autocomplete) + - [CSS rule cleanup (partial revert)](#css-rule-cleanup-partial-revert) + - [Repository note](#repository-note) +- [Breaking changes and migration](#breaking-changes-and-migration) +- [What's next](#whats-next) + +## NumberField + +Base UI adoption is expanding across Material UI: for now through component recipes, with more native Material UI surfaces to follow. +`NumberField` is the first new primitive in this cycle built on that stack: a focused control for numeric input with consistent accessibility and styling hooks. + +
+ +
NumberField, implemented on Base UI.
+
+ +See the [NumberField](/material-ui/react-number-field/) documentation for API details and examples. + +## Menubar and submenus + +`Menubar` is the other new Base UI-backed surface in v9: a horizontal menu bar pattern with strong keyboard support, aligned with how menus and navigation are modeled in Base UI. +On this stack, we can finally support submenus, nested menus off the bar, instead of stopping at a single-level strip. + +
+ +
Menubar with submenus and keyboard-friendly navigation.
+
+ +Together, NumberField and Menubar show where we're headed in v9: wider Base UI adoption in Material UI, and interactions, including keyboard support, that stay clear and consistent even in dense UIs. + +See the [Menubar](/material-ui/react-menubar/) documentation for API details and examples. + +## Theme and CSS variables + +### Derived colors with `color-mix()` + +Theme in v9 extends the CSS variables system to generate `color-mix()` values on top of the default Material UI theme variables. +This gives you: + +- More precise control over derived colors. +- Better integration with design systems that already rely on `color-mix()` for overlays and surfaces. +- A path to future optimizations where the theme can encode more semantics into variables rather than relying on ad‑hoc runtime logic. + +### Tooltip docs clarity and `nativeColor` fixes + +- Tooltip documentation now describes the visible text triggers more explicitly, clarifying which interactions and DOM structures are supported. +- We also fixed the `nativeColor` docs to better reflect how it behaves alongside the CSS variables system. + +Current behavior and props are documented on the [Tooltip](/material-ui/react-tooltip/) page. + +Behind the scenes, we invested in prep work so the codebase could handle the v9 cycle smoothly, including versioning and build changes, plus adjustments that reduce friction for future breaking‑change work. + +## Interaction and accessibility fixes + +These updates focus on small but important behavior changes, especially around accessibility and event handling. + +### Autocomplete, Backdrop, Tooltip + +Autocomplete + +- Prevent menu opening on right-click so context-menu interactions don't unexpectedly toggle the options list. + +Backdrop + +- Remove `aria-hidden` by default so the backdrop is no longer aggressively hiding content from assistive technologies (a11y improvements). + +ButtonBase + +- Ensure `onClick` events propagate correctly when a non‑native button element is clicked. + +Dialog and Modal + +- Remove the `disableEscapeKeyDown` prop. + +TableCell and theme – color mixing for borders + +- Apply alpha before color mixing for the `border-bottom` color when `nativeColor` and `cssVariables` are used together. + +Theme typing + +- Remove `MuiTouchRipple` from theme component types. + +Tooltip + +- Fix an error when wrapping a disabled input that is focused. + +`useAutocomplete` typing + +- Improve TypeScript typing for `useAutocomplete`. + +## Platform cleanup + +Platform cleanup and docs infrastructure in v9 focus on cleanup, maintainability, and more efficient developer workflows. + +Material UI + +- Clean up duplicated CSS rules to reduce redundancy and keep output styles more predictable. + +- Bundle size improvements. + +- `sx` prop performance improvements up to 30% for a heavy sx usage (details in [PR #44254](https://github.com/mui/material-ui/pull/44254)). + +System + +- Refactor the container query sorting regex used in the system layer. + +## Keyboard navigation + +Keyboard navigation and accessibility improvements keep moving the ecosystem forward. + +### Roving TabIndex across menus and navigation + +- Improved Roving TabIndex keyboard navigation for Stepper, Tabs, and MenuList. +- Additional accessibility improvements for Stepper, MenuList, and Tabs. + +Improved roving TabIndex focus is a key v9 highlight for keyboard-first components like Menu, Stepper, and Tabs. + +### Autocomplete + +- Add a `root` slot. +- Support full slots for `clearIndicator` and `popupIndicator`. +- Fix the popup reopening when the window regains focus with `openOnFocus`. + +### CSS rule cleanup (partial revert) + +- Partially revert duplicated CSS rules cleanup, where it proved too aggressive. + +### Repository note + +- As part of ongoing repository maintenance, we removed Joy UI code and docs from this repo. + +## Breaking changes and migration + +Main breaking changes are related to removal of deprecated props such as `component` and `componentsProps` across the library, removal of deprecated system props from layout components, and accessibility improvements for Tabs and Menu. + +The main benefit of the breaking changes are ~3% bundle size reduction compared to v7 and overall performance gain. + +For a consolidated upgrade path from Material UI v7, follow the [Upgrade to v9](/material-ui/migration/upgrade-to-v9/) migration guide. +For earlier majors, find the [v6](/material-ui/migration/upgrade-to-v6/) and [v7](/material-ui/migration/upgrade-to-v7/) upgrade guides. + +## What's next + +- Remove dependency on Emotion. +- Performance improvements. +- Accessibility improvements. +- Add more components from Base UI. + +## Further reading + +- [Introducing Material UI and MUI X v9](/blog/introducing-mui-v9/) +- [MUI X Data Grid v9.0](/blog/introducing-mui-x-data-grid-v9/) +- [MUI X Charts v9.0](/blog/introducing-mui-x-charts-v9/) +- [MUI X v9.0: Tree View, Date Pickers](/blog/introducing-mui-x-tree-view-and-pickers-v9/) +- [MUI X Scheduler v9 alpha](/blog/introducing-mui-x-scheduler-v9-alpha/) +- [MUI X Chat v9 alpha](/blog/introducing-mui-x-chat-v9-alpha/) + +## We want your feedback + +Your input drives our direction. +Join our GitHub communities today to share your insights, report issues, and help shape the future. +Visit [Material UI on GitHub](https://github.com/mui/material-ui). diff --git a/docs/pages/blog/introducing-mui-v9.js b/docs/pages/blog/introducing-mui-v9.js new file mode 100644 index 00000000000000..23162c4aacc5fd --- /dev/null +++ b/docs/pages/blog/introducing-mui-v9.js @@ -0,0 +1,6 @@ +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-mui-v9.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-mui-v9.md b/docs/pages/blog/introducing-mui-v9.md new file mode 100644 index 00000000000000..aae750cd3f7420 --- /dev/null +++ b/docs/pages/blog/introducing-mui-v9.md @@ -0,0 +1,310 @@ +--- +title: Introducing Material UI and MUI X v9 +description: 'Introducing Material UI + MUI X v9: unified major version, new foundations, advanced components, and AI-native workflows.' +date: 2026-04-08T08:00:00.000Z +authors: ['josefreitas', 'oliviertassinari'] +tags: ['Material UI', 'MUI X', 'Product'] +manualCard: false +--- + + + + + + + +We are thrilled to announce the simultaneous release of **Material UI v9** and of each **MUI X v9 components**. + +We are re-aligning the major versions of the core design system and all the advanced components to provide a more cohesive, predictable development experience. +This is more than a version bump; it represents one step toward a strongly unified ecosystem for the MUI products. + +In v9, we focused on three concrete areas: + +- **Better integration**: No more guessing which version of MUI X works with which version of Material UI. Moving forward, both libraries will share major versioning, simplifying upgrades across the tech stack. + +- **Expanding the portfolio**: Material UI adds `NumberField` and `Menubar`; MUI X adds new advanced surfaces like Scheduler and Chat in alpha. + +- **AI workflows with operational support**: Data Grid AI Assistant is available, and MUI Console adds license and API key management needed to run it in production. + +## Table of contents + +- [What we released](#what-we-released) +- [One MUI ecosystem, a synced major version](#one-mui-ecosystem-a-synced-major-version) +- [Components highlights](#components-highlights) +- [New MUI Console application](#new-mui-console-application) +- ["MUI Chat" renamed to "MUI Recipes"](#mui-chat-renamed-to-mui-recipes) +- [MUI X pricing and licensing updates](#mui-x-pricing-and-licensing-updates) +- [Telemetry on commercial components](#telemetry-on-commercial-components) +- [What's next](#whats-next) + - [Component portfolio expansion](#component-portfolio-expansion) + - [AI-native workflows](#ai-native-workflows) + - [Remove emotion and add modern theme layering](#remove-emotion-and-add-modern-theme-layering) + +## What we released + +All the announcements per product: + +
+ + Material UI v9.0 +

Improved design-system foundations.

+ + + MUI X Data Grid v9.0 +

Dynamic data, in-grid charts, AI assistant.

+ + + MUI X Charts v9.0 +

Candlestick, improved UX.

+ + + MUI X v9.0: Tree View, Date Pickers +

Virtualization, keyboard navigation, and locale support.

+ + + MUI X Scheduler v9 alpha +

Resource-aware calendars and timelines.

+ + + MUI X Chat v9 alpha +

Conversational UI for LLMs with adapters.

+ +
+ +## One MUI ecosystem, a synced major version + +When we shipped MUI X v6 in 2023, [we decoupled MUI X's major version from Material UI](/blog/mui-x-v6/#decoupling-versions-from-mui-core), at a time when Material UI was still on v5. +The goal was to give advanced components a faster, predictable release rhythm without tying every breaking change to Material UI's release schedule. +We also assumed that, over time, breaking-change pressure might push the two major lines further apart. + +In practice, that divergence never really increased the way we expected, while keeping independent major numbers still made upgrades, peer dependencies, and communication across the stack heavier than we liked. + +So for v9, we're realigning: Material UI moves from v7 straight to v9 (there is no Material UI v8, like there is no v2), in step with MUI X v9, restoring a single shared major for the suite for the first time since that split. + +With v9, we're synchronizing the major version across the stack: + +- **Material UI v9:** the design‑system and layouts foundation. +- **MUI X v9:** the advanced components built on top: Data Grid, Charts, Tree View, Date and Time Pickers, Scheduler, Chat, and more. + +A single major version number makes it easier to: + +- Stage cross‑cutting improvements, such as accessibility and keyboard navigation upgrades, across both layers at once. +- Align upgrade windows and migration guides across packages. +- Communicate compatibility, for example, "MUI X v9 is designed to pair with Material UI v9". + +
+ +
Material UI and MUI X v9 ecosystem overview.
+
+ +## Components highlights + +We've focused on stability, accessibility, and new building blocks across the v9 major; these bullets summarize the direction: + +- **Material UI:** new NumberField and Menubar; keyboard and accessibility fixes; and theme updates that extend CSS variables with `color-mix()` for derived colors.\ + See the [Material UI v9](/blog/introducing-material-ui-v9/) post. +- **Data Grid:** dynamic data and lazy loading hardening; selection, header, and filter ergonomics; stable in-grid Charts integration for dashboards that mix tables and visuals.\ + See the [MUI X Data Grid v9](/blog/introducing-mui-x-data-grid-v9/) post. +- **Charts:** removal of long‑deprecated chart entry points in favor of `Charts*` APIs; keyboard navigation on by default; axis tooltip and legend refinements; Candlestick in Charts Premium; tooltips portaling through `ChartsLayerContainer` so you get predictable composition when charts live inside scroll regions, dialogs, or grids—tooltips stay visible instead of being clipped by ancestor `overflow`, and their stacking lines up with the rest of the chart layer model.\ + See the [MUI X Charts v9](/blog/introducing-mui-x-charts-v9/) post. +- **Tree View:** Rich Tree View Pro gets virtualization on by default (with opt‑out), and `treeItemClasses` / hook cleanups when you theme trees or call imperative APIs.\ + See the [MUI X v9 Tree View](/blog/introducing-mui-x-tree-view-and-pickers-v9/#tree-view) section. +- **Date and Time Pickers:** keyboard calendar navigation, stable `fieldRef` with `clearValue`, better click‑away focus behavior, and locale/adapter work (`thTH`, `AdapterDayjsBuddhist`).\ + See the [MUI X v9 Date and Time Pickers](/blog/introducing-mui-x-tree-view-and-pickers-v9/#date-and-time-pickers) section. +- **Scheduler and Chat debut:** v9 starts with two new advanced components: Scheduler for resource‑aware calendars and timelines, and Chat for conversational UI with adapters and streaming. + Both are debuting at alpha; product detail, onboarding, and tiers in the [MUI X Scheduler v9 alpha](/blog/introducing-mui-x-scheduler-v9-alpha/) and [MUI X Chat v9 alpha](/blog/introducing-mui-x-chat-v9-alpha/) posts. + +Note: Event Timeline and advanced Charts preview features are available under the Premium plan. + +## New MUI Console application + +Last year, we began offering [AI assistance for the Data Grid](/blog/introducing-mui-x-data-grid-v9/#ai-assistant): users describe what they want in natural language, and the grid applies structured changes while keeping state visible and editable. + +Until now, production rollout was harder: teams needed support round-trips for API keys and had less visibility into usage alongside licenses. + +The [MUI Console](https://console.mui.com) is the application we're rolling out to remove this friction. +It gathers license keys, service API keys (including for assistant and add-on experiences), billing, and usage in one place: an operational hub for MUI's commercial offerings rather than scattered tickets and dashboards. + +With the console, teams can: + +- See license status and seat assignments at a glance. +- Manage billing, renewals, upgrades, and service add‑ons in one workflow. +- Create, view, and rotate API keys for commercial services without relying on a support round‑trip for routine access. + +We will expand Console over time, but v9 already covers the core operational loop: provision keys, manage licenses, and monitor usage. + +## "MUI Chat" renamed to "MUI Recipes" + +[MUI Chat](https://chat.mui.com/) is a generative UI tool: you describe the UI you want and it generates a production ready React interface using the idiomatic API of Material UI, MUI X, or Base UI if you asked for it. + +Compared with starting from a blank file, it generates a first draft UI quickly and uses MUI component APIs directly. +That reduces the amount of adaptation needed before you can use the output in a real codebase. + +In practice, we use it mostly to deliver custom recipes and customization grounded in what you already see in the docs: variations on our examples, tuned layouts, and branded panels that stay aligned with the same APIs and patterns we document. + +v9 introduces something different: MUI X Chat, a real chat component (`@mui/x-chat`) meant to ship inside your product. +Keeping the builder under the name "Chat" would collide with that surface and confuse two very different offerings. + +So MUI Chat is being renamed to [MUI Recipes](https://recipes.mui.com), a name that matches what the tool is optimized for today: recipe-style outputs and tailored UIs built from our component set, not an embeddable chat runtime. + +## MUI X pricing and licensing updates + +Starting April 8, 2026, MUI X pricing and licensing are updated: + +- Pro and Premium pricing is updated. +- Pro and Premium move to application-based licensing (single-application and multi-application options). +- Enterprise remains multi-application with a 15-seat minimum. +- Existing v8 customers can keep renewing v8 at previous pricing, and can request a v9-compatible key when upgrading. +- Priority support is now Enterprise-only. + +For full details, transition examples, and plan-by-plan terms, read the full announcement: +[Upcoming Changes to MUI X Pricing and Licensing in 2026](/blog/2026-mui-x-price-changes/). + +## Telemetry on commercial components + +We launched telemetry for commercial components last year. +In v9, telemetry is now enabled by default in development mode for commercial components, and it remains off in production builds. + +Telemetry helps us understand how developers use components in real projects, so we can prioritize fixes, improve defaults, and focus roadmap work on the patterns teams actually use. +If your workspace requires it, you can opt out by following the documented steps: +[Opting out of telemetry](/x/guides/telemetry/#opting-out). + +## What's next + +Over the coming months, we plan to focus our work on the following areas. + +### Component portfolio expansion + +Advanced components continue to grow across three workflow types: data analysis (Data Grid and Charts), Resource management (Calendar and Timeline), and conversational interfaces (Chat). + +- NumberField and Menubar will ship as npm components, not only as documentation recipes you copy from the docs. +- Data Grid continues to expand AI and workflow features, and Material UI continues to add Base UI-powered components. +- Scheduler will keep iterating on Event Calendar and Timeline so teams can move from classic appointment views to dense resource planning in one package, and we will keep shipping additional Base UI-powered components as they are ready. + +The goal is production workflows, not isolated demos: components should keep state inspectable, integrate cleanly, and remain controllable by application logic. + +### AI-native workflows + +The [Data Grid AI Assistant](/blog/introducing-mui-x-data-grid-v9/#ai-assistant) is the first large piece of that story in production. +Together with the [MUI Console](#new-mui-console-application), where you can handle licenses and service keys in one flow, it forms a clearer path from trying assistive features to rolling them out, without stitching together separate tools for assistants and account management. + +Integrated AI workflows can reduce repetitive multi-step UI actions while keeping the resulting state visible and editable. + +Across v9 minors, we plan to expand assistant coverage, improve reliability and documentation, and integrate assistant flows more deeply with advanced components. + +### Remove emotion and add modern theme layering + +We're listening to you, and for the next major, we're going to explore refactoring the styling layer and theme layering model to better support modern design-system workflows: + +- Target independence from Emotion and better integration paths for teams using Tailwind CSS. +- The ability for you to use Material Design, or have a separate theme with your own brand, without having to override every class. + +## Further reading + +- [Material UI v9](/blog/introducing-material-ui-v9/) +- [MUI X Data Grid v9.0](/blog/introducing-mui-x-data-grid-v9/) +- [MUI X Charts v9.0](/blog/introducing-mui-x-charts-v9/) +- [MUI X v9.0: Tree View, Date Pickers](/blog/introducing-mui-x-tree-view-and-pickers-v9/) +- [MUI X Scheduler v9 alpha](/blog/introducing-mui-x-scheduler-v9-alpha/) +- [MUI X Chat v9 alpha](/blog/introducing-mui-x-chat-v9-alpha/) + +## We want your feedback + +Your input drives our direction. +Join our GitHub communities today to share your insights, report issues, and help shape the future: + +- Visit [Material UI on GitHub](https://github.com/mui/material-ui) +- Visit [MUI X on GitHub](https://github.com/mui/mui-x) diff --git a/docs/pages/blog/introducing-mui-x-charts-v9.js b/docs/pages/blog/introducing-mui-x-charts-v9.js new file mode 100644 index 00000000000000..565076501e4fc8 --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-charts-v9.js @@ -0,0 +1,6 @@ +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-mui-x-charts-v9.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-mui-x-charts-v9.md b/docs/pages/blog/introducing-mui-x-charts-v9.md new file mode 100644 index 00000000000000..d2907f0f31f747 --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-charts-v9.md @@ -0,0 +1,130 @@ +--- +title: MUI X Charts v9.0 +description: 'MUI X Charts v9.0, keyboard-first by default, composition and codemods, Pro and Premium updates (heatmap, Sankey, export, WebGL).' +date: 2026-04-08T08:00:00.000Z +authors: ['josefreitas'] +tags: ['MUI X', 'Product'] +manualCard: false +hideFromHomeList: true +--- + + + +In v9, we continued the same story you saw accelerate in v8: better default micro interactions and better default accessibility, a composition model centered on `Charts*` primitives and `ChartsLayerContainer`, and steadier Pro and Premium surfaces for dense and analytical charts. + +For line‑item changes, follow the [MUI X releases](https://github.com/mui/mui-x/releases) timeline. + +This new major is part of a coordinated effort across the entire product suite; for a complete look at the MUI ecosystem changes, check out the [Introducing Material UI and MUI X v9](/blog/introducing-mui-v9/) blog post. + +## Table of contents + +- [Interaction and accessibility](#interaction-and-accessibility) +- [Composition, naming, and breaking cleanup](#composition-naming-and-breaking-cleanup) +- [Candlestick](#candlestick) [](/x/introduction/licensing/#premium-plan 'Premium plan') +- [Range bar charts](#range-bar-charts) [](/x/introduction/licensing/#premium-plan 'Premium plan') +- [Breaking changes and migration](#breaking-changes-and-migration) +- [What's next](#whats-next) + +## Interaction and accessibility + +Keyboard navigation is on by default in v9, with follow‑through work on focus and tooltips. + +Across MIT, Pro, and Premium, we've kept tightening legend and axis ergonomics: clearer hooks for layout and ticks, better control over axis tooltips and ordering, and refinements to how series identity and highlighting behave so custom themes don't fight the internals. + +The headline is a charting stack that feels reachable from the keyboard and easier to tune without diving into copy‑paste workarounds. + +See the [Charts](/x/react-charts/) overview for APIs and examples. + +## Composition, naming, and breaking cleanup + +v9 is packed with changes to align components prefixes. Previously a mix of `Chart*` and `Charts*` prefixes were used. Now you should expect `Charts*` to be the only prefix left. + +Line charts adopt `preferStrictDomainInLineCharts` as the default; if you relied on the previous auto‑domain behavior, confirm axis ranges after upgrading. + +Tooltips align with the layer container model: portaling through `ChartsLayerContainer` means tooltip markup is not trapped under the SVG or a parent with `overflow: hidden`, so you spend less time debugging clipped overlays when charts sit in scroll areas, dialogs, or Data Grid cells, and z-order stays consistent with other chart layers. Shared primitives also accept `className` more predictably, so bar, line, radar, and shared wrappers theme the same way. + +For composition patterns and layering, see [Charts composition](/x/react-charts/composition/). + +## Candlestick [](/x/introduction/licensing/#premium-plan 'Premium plan') + +[Candlestick charts](/x/react-charts/candlestick/) visualize OHLC (open, high, low, close) series over time, the familiar shape for equities, FX, and other interval‑based price data. +The chart is build on top of WebGL to insure high performance. +Candlestick and other advanced Charts preview features are available under the Premium plan. + +The feature is still in preview: visuals, APIs, and defaults may change in upcoming minors as we harden exports, interaction, and composition with WebGL layering alongside line or bar siblings. + +
+ +
Candlestick preview in MUI X Charts.
+
+ +## Range bar charts [](/x/introduction/licensing/#premium-plan 'Premium plan') + +[Range bar charts](/x/react-charts/range-bar/) show the span between a minimum and a maximum for each category: weather bands, phase lengths on a roadmap, SLA windows, or any "from-to" reading where a single stacked bar does not tell the whole story. + +They sit on the Premium side of the line‑up and follow the same `Charts*` composition model as the rest of v9, including keyboard and tooltip behavior consistent with other bar‑family charts. + +
+ +
Range bar charts preview in MUI X Charts.
+
+ +## Breaking changes and migration + +Breaking changes, codemods, and checklist items for moving to v9 are centralized in [Migration from v8 to v9 (Charts)](/x/migration/migration-charts-v8/). + +## What's next + +On the commercial plan, expect continued polish on candlestick and other advanced charts. We'll keep pushing to deliver WebGL‑backed chart types where you need to render very large datasets without sacrificing responsiveness. + +We also want Charts to ride the same Base UI wave as Material UI: clearer composition, and styling hooks that do not require reverse‑engineering private markup. That is exploratory for now; expect it to show up in v9 minors as the shared patterns and documentation settle. + +Follow all updates in the [Charts](/x/react-charts/) documentation. + +## Further reading + +- [Material UI and MUI X v9 overview](/blog/introducing-mui-v9/) +- [Material UI v9](/blog/introducing-material-ui-v9/) +- [MUI X Data Grid v9.0](/blog/introducing-mui-x-data-grid-v9/) +- [MUI X v9.0: Tree View, Date Pickers](/blog/introducing-mui-x-tree-view-and-pickers-v9/) +- [MUI X Scheduler v9 alpha](/blog/introducing-mui-x-scheduler-v9-alpha/) +- [MUI X Chat v9 alpha](/blog/introducing-mui-x-chat-v9-alpha/) + +## We want your feedback + +Your input drives our direction. +Join our GitHub communities today to share your insights, report issues, and help shape the future. +Visit [MUI X on GitHub](https://github.com/mui/mui-x/issues?q=is%3Aissue%20label%3A%22scope%3A%20charts%22). diff --git a/docs/pages/blog/introducing-mui-x-chat-v9-alpha.js b/docs/pages/blog/introducing-mui-x-chat-v9-alpha.js new file mode 100644 index 00000000000000..29ac64ba187504 --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-chat-v9-alpha.js @@ -0,0 +1,6 @@ +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-mui-x-chat-v9-alpha.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-mui-x-chat-v9-alpha.md b/docs/pages/blog/introducing-mui-x-chat-v9-alpha.md new file mode 100644 index 00000000000000..dd56e819de6d22 --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-chat-v9-alpha.md @@ -0,0 +1,115 @@ +--- +title: MUI X Chat v9 alpha +description: 'An early look at MUI X Chat v9 alpha: ChatBox, adapters and streaming, and how it fits AI-native workflows across the stack.' +date: 2026-04-08T08:00:00.000Z +authors: ['josefreitas'] +tags: ['MUI X', 'Product'] +manualCard: false +hideFromHomeList: true +--- + + + +In v9 we're laying the groundwork for AI-native conversational experiences in MUI X. +[MUI X Chat](/x/react-chat/) centers on `ChatBox`, with adapters and streaming designed for real product workflows. + +This post is an orientation, not an API reference: how the layers stack, why adapters and streams sit at the center, and how early work connects to Data Grid, Scheduler, and the v9 overview. + +This new major is part of a coordinated effort across the entire product suite; for a complete look at the MUI ecosystem changes, check out the [Introducing Material UI and MUI X v9](/blog/introducing-mui-v9/) blog post. + +## Table of contents + +- [Quick start](#quick-start) +- [What alpha means](#what-alpha-means) +- [When to expect the stable](#when-to-expect-the-stable) +- [Chat showcase](#chat-showcase) +- [State, adapters, and streaming](#state-adapters-and-streaming) +- [Message parts beyond plain text](#message-parts-beyond-plain-text) +- [What's next](#whats-next) + +## Quick start + +Install the package and render your first chat surface in minutes: follow [the quickstart guide](/x/react-chat/) for your first working `ChatBox`. +Then wire your adapter and streaming path so users see tokens and tool output progressively as responses arrive. + +## What alpha means + +MUI X Chat is deliberately early: the docs are minimal for now, and you should expect breaking changes along the way as we receive feedback from users. +The goal is a foundation you can theme, swap providers on, and extend, not a frozen UI kit on day one. + +If you're experimenting with tools, agents, or assistant UX beside your product surface, this is the layer where we want feedback and real integrations. + +## When to expect the stable + +We're targeting a stable Chat release in early June, based on the feedback and adoption patterns we see during alpha. +That target is expectation-setting, we will only ship as stable when the components are ready. + +Keeping Chat in alpha is intentional, because this is the phase where we can still make breaking changes before the next major while the API surface is being stress-tested. + +## Chat showcase + +
+ +
MUI X Chat showcase in v9 alpha.
+
+ +## State, adapters, and streaming + +MUI X Chat work centers on entity types and a normalized store so conversations, threads, messages, participants, tool calls, and results don't turn into duplicated, fragile state as histories grow. + +An adapter sits between that state and your backend: same UI whether you call OpenAI, an in‑house model, HTTP, WebSockets, or SSE, and the same boundary when orchestration lives outside React. + +A stream processor coordinates token streams, partial parts, tool starts, and tool results so the UI can stay streaming‑first: partial text, progress, and mid‑stream tool UI without ad‑hoc race handling in every app. + +Core chat hooks wire store, processor, and adapter together; tests lock those flows so we can iterate without regressing send/stream/tool behavior across tiers. + +## Message parts beyond plain text + +Modeling messages as parts (such as tool calls and results, sources, and file attachments) keeps assistant UX inspectable: users and developers can see what ran, on what data, and in what order. + +Streaming treats responses as sequences of parts and tokens, not one immutable blob, which matters when Chat works alongside Data Grid transforms, Scheduler mutations, or other multi‑step automations where results arrive gradually. + +## What's next + +Phase 0-1 (v9) is delivered as one milestone: package APIs, core hooks, themed `ChatBox`, docs and examples, opinionated layouts (conversation surface, input, history, threads), and first-class wiring to other MUI X components. + +Phase 2 expands workflow patterns ("chat with your data," "chat with your schedule," mixed chart and grid flows), with production-ready docs that help teams ship without reinventing glue code. + +Phase 3 ships templates and tighter ecosystem combinations (advanced components + Material UI + Console where licensing applies), aligned with the v9 direction of clear intents and reversible state. + +We will roll these milestones through the v9 cycle in regular releases; follow [MUI X releases](https://github.com/mui/mui-x/releases) for packaged updates. + +## Further reading + +- [Material UI and MUI X v9 overview](/blog/introducing-mui-v9/) +- [Material UI v9](/blog/introducing-material-ui-v9/) +- [MUI X Data Grid v9.0](/blog/introducing-mui-x-data-grid-v9/) +- [MUI X Charts v9.0](/blog/introducing-mui-x-charts-v9/) +- [MUI X v9.0: Tree View, Date Pickers](/blog/introducing-mui-x-tree-view-and-pickers-v9/) +- [MUI X Scheduler v9 alpha](/blog/introducing-mui-x-scheduler-v9-alpha/) + +## We want your feedback + +Your input drives our direction. +Join our GitHub communities today to share your insights, report issues, and help shape the future. +Visit [MUI X on GitHub](https://github.com/mui/mui-x/issues?q=is%3Aissue%20label%3A%22scope%3A%20chat%22). diff --git a/docs/pages/blog/introducing-mui-x-data-grid-v9.js b/docs/pages/blog/introducing-mui-x-data-grid-v9.js new file mode 100644 index 00000000000000..1784ed57b246ab --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-data-grid-v9.js @@ -0,0 +1,6 @@ +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-mui-x-data-grid-v9.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-mui-x-data-grid-v9.md b/docs/pages/blog/introducing-mui-x-data-grid-v9.md new file mode 100644 index 00000000000000..8fecf72bb1db2b --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-data-grid-v9.md @@ -0,0 +1,130 @@ +--- +title: MUI X Data Grid v9.0 +description: 'MUI X Data Grid v9.0: stronger dynamic data and lazy loading, stable Charts in the grid, and AI Assistant with Console and bring your own key.' +date: 2026-04-08T08:00:00.000Z +authors: ['josefreitas'] +tags: ['MUI X', 'Product'] +manualCard: false +hideFromHomeList: true +--- + + + +In v9, we tightened how the data grid works with live and server-backed data, making tabular-plus-visual dashboards first-class, and continuing to treat AI assistance as part of the product, not a side demo. + +For line‑item changes, follow the [MUI X releases](https://github.com/mui/mui-x/releases) timeline. + +This new major is part of a coordinated effort across the entire product suite; for a complete look at the MUI ecosystem changes, check out the [Introducing Material UI and MUI X v9](/blog/introducing-mui-v9/) blog post. + +## Table of contents + +- [Charts integrated with Data Grid](#charts-integrated-with-data-grid) +- [Dynamic data, editing, and everyday UX](#dynamic-data-editing-and-everyday-ux) +- [AI Assistant](#ai-assistant) +- [Breaking changes and migration](#breaking-changes-and-migration) +- [What's next](#whats-next) + +## Charts integrated with Data Grid + +Charts inside the grid is stable in v9: you can ship dashboards that mix tables and visuals without treating the integration as experimental. +We also kept the implementation in step with Material UI v9 so the grid and charts don't drift as both packages evolve. + +
+ +
Charts integration inside the Data Grid.
+
+ +If you already combine the two, plan a quick pass on your dashboards after upgrading. +For usage and API details, see the [Data Grid](/x/react-data-grid/) documentation. + +## Dynamic data, editing, and everyday UX + +Much of the v9 grid work is incremental but important: lazy loading and data source behavior (caching, invalidation, and tree or nested server data) got attention so large datasets feel predictable when rows stream in or edit state changes. +Alongside that, we kept polishing filtering and locales (including broader locale coverage in line with Pickers), selection and pagination (keyboard flow, fewer unnecessary rerenders, clearer defaults), and small header and robustness fixes so Pro features like detail panels and resizable regions stay solid when props update in quick succession. + +Rather than walk every commit here, think of v9 as a cycle where dynamic data paths and editing ergonomics move together, with housekeeping to stay aligned with Material UI v9 internals underneath. + +The [Server‑side data](/x/react-data-grid/server-side-data/) guide covers lazy loading, caching, and editing patterns in depth. + +## AI Assistant + +
+ +
Data Grid AI Assistant workflow.
+
+ +The Data Grid AI Assistant remains a flagship example of AI‑native design in MUI X: users describe what they want in natural language, and the grid applies structured changes (filters, sorting, grouping, aggregations, pivoting) that stay visible and editable in the UI. + +Turning that on in production is not only a front‑end story. +The [MUI Console](https://console.mui.com) brings licensing, service API keys, and billing into one place so teams can create and rotate keys without routing every request through support. +Where governance matters, bring your own key lets you supply your own provider credentials so traffic and policies stay under your control, while the same assistant flows apply to the grid; +[more details](/blog/introducing-mui-v9/#new-mui-console-application). + +Together, Console, clearer onboarding documentation, and the assistant docs make a stronger end‑to‑end path: from trying the feature in docs, to provisioning keys and billing, to shipping the same flows in your product without stitching together separate tools. + +Conceptually, we keep a simple chain: question → interpretation → grid API calls → inspectable configuration. +That matches how we want other advanced components to behave: clear intents, observable state, and purpose‑built UI for history and applied changes, not a generic chat bolt‑on. + +See the [AI Assistant](/x/react-data-grid/ai-assistant/) documentation for integration and API details. + +## Breaking changes and migration + +Step‑by‑step breaking changes, codemods, and version pairing with Material UI live in the dedicated migration guide: [Migration from v8 to v9](/x/migration/migration-data-grid-v8/). + +Work through that alongside the sections above if you rely on lazy loading, tree or nested server data, row editing, Charts inside the grid, or the AI Assistant. + +## What's next + +Looking past the v9.0 line, we're investing in several directions on the Data Grid: + +- **Base UI:** We're exploring how it can improve advanced visual customization for the grid: composition and styling that stay approachable for dense, highly tailored surfaces, aligned with the broader Material UI move toward Base UI. +- **Excel‑style formulas:** We intend to broaden formula and formula‑like behaviors so spreadsheet‑minded workflows feel more at home in the grid. +- **Data Grid AI Assistant:** Expect broader coverage of grid operations, tighter polish, and continued pairing with Console and documentation so adoption stays straightforward. + +## Further reading + +- [Material UI and MUI X v9 overview](/blog/introducing-mui-v9/) +- [Material UI v9](/blog/introducing-material-ui-v9/) +- [MUI X Charts v9.0](/blog/introducing-mui-x-charts-v9/) +- [MUI X v9.0: Tree View, Date Pickers](/blog/introducing-mui-x-tree-view-and-pickers-v9/) +- [MUI X Scheduler v9 alpha](/blog/introducing-mui-x-scheduler-v9-alpha/) +- [MUI X Chat v9 alpha](/blog/introducing-mui-x-chat-v9-alpha/) + +## We want your feedback + +Your input drives our direction. +Join our GitHub communities today to share your insights, report issues, and help shape the future. +Visit [MUI X on GitHub](https://github.com/mui/mui-x/issues?q=is%3Aissue%20label%3A%22scope%3A%20data%20grid%22). diff --git a/docs/pages/blog/introducing-mui-x-scheduler-v9-alpha.js b/docs/pages/blog/introducing-mui-x-scheduler-v9-alpha.js new file mode 100644 index 00000000000000..4ebbcde8376d42 --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-scheduler-v9-alpha.js @@ -0,0 +1,6 @@ +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-mui-x-scheduler-v9-alpha.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-mui-x-scheduler-v9-alpha.md b/docs/pages/blog/introducing-mui-x-scheduler-v9-alpha.md new file mode 100644 index 00000000000000..aad29f66efafcd --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-scheduler-v9-alpha.md @@ -0,0 +1,172 @@ +--- +title: MUI X Scheduler v9 alpha +description: 'An early look at MUI X Scheduler v9 alpha: event and resource planning, calendar and timeline views, Community vs Premium, and how it fits the advanced stack.' +date: 2026-04-08T08:00:00.000Z +authors: ['josefreitas'] +tags: ['MUI X', 'Product'] +manualCard: false +hideFromHomeList: true +--- + + + +The Scheduler is a new advanced component in MUI X aimed at time‑ and resource‑centric applications: not just a decorative calendar, but events bound to people, rooms, equipment, and projects, with interactions that match how real products work. + +We're shipping it in alpha: useful for prototypes and roadmap planning, but the APIs are subject to change until the stable release—and we're hoping to get your feedback so we can move through this phase quickly. + +This post explains what we're building, how Community and Premium differ, and where it sits next to Data Grid, Charts, and Chat. + +For line‑item changes, follow the [MUI X releases](https://github.com/mui/mui-x/releases) timeline. + +This new major is part of a coordinated effort across the entire product suite; for a complete look at the MUI ecosystem changes, check out the [Introducing Material UI and MUI X v9](/blog/introducing-mui-v9/) blog post. + +## Table of contents + +- [Quick start](#quick-start) +- [What alpha means](#what-alpha-means) +- [When to expect the stable](#when-to-expect-the-stable) +- [What you can build](#what-you-can-build) +- [Event Calendar](#event-calendar) +- [Fit with the rest of MUI X](#fit-with-the-rest-of-mui-x) +- [Event Timeline](#event-timeline) [](/x/introduction/licensing/#premium-plan 'Premium plan') +- [Community and Premium](#community-and-premium) [](/x/introduction/licensing/#premium-plan 'Premium plan') +- [What's next](#whats-next) + +## Quick start + +Install the package and render the Scheduler in minutes: start in the [MUI X Scheduler docs](/x/react-scheduler/) and follow [the quickstart guide](/x/react-scheduler/quickstart/) for your first working calendar. +Then layer your event model and resources on top, and switch to Event Timeline when your use case needs dense resource planning. + +## What alpha means + +We expect the same release arc that we've followed for other advanced components: alpha, then beta, then stable, with migration notes as the surface hardens. +Today, that means you can prototype and send feedback—don't assume imports are frozen or that slot APIs can't be changed. +If you've shipped on Data Grid or Charts through early majors, the process should feel familiar. + +## When to expect the stable + +We're targeting a stable Scheduler release in early July, based on the feedback and usage signals we collect during alpha. +The date is an expectation, not a hard promise: we ship when quality is there. + +Keeping Scheduler in alpha right now is intentional because it gives us the room to make necessary breaking changes before the next major, while APIs are still being validated in real projects. + +## What you can build + +
+ +
Scheduler in MUI X v9 alpha.
+
+ +At the center is an event model with start and end times, titles, and metadata that you link back to your business logic. + +You can group those events under resources representing people, rooms, assets or looser groupings that match your product. + +Recurring events support practical scheduling patterns: daily/weekly/monthly and custom rules, editable as a full series or one‑off exceptions, with timezone-aware evaluation so a daily 09:00 meeting stays at 09:00 local time across DST changes. + +Timezones are modeled so you can store canonically (for example, UTC), render in the user's zone, and lean on the stack for DST and regional rules instead of reinventing offsets in every app. + +## Event Calendar + +Event Calendar views read like classic planners: day, week, month and agenda. + +They suit appointment booking, service desks, team coordination, and smaller‑scale capacity questions where users think in calendar blocks first. + +This is the best default when your users already understand calendar metaphors and need fast navigation across dates with a lightweight resource context. + +
+ +
Event Calendar in MUI X Scheduler.
+
+ +## Fit with the rest of MUI X + +Technically, Scheduler follows the v9 peer and theme story: align versions with Material UI and sibling MUI X packages, use shared theme augmentation and `sx` like the rest of the line, and keep Premium features packaged so you opt in explicitly. + +Conceptually, it closes a gap: Data Grid for tabular workflows, Charts for visual analytics, Scheduler for resource management and capacity, and Chat for conversational assistance. +Together, they're the workflow-heavy side of the stack we're shipping in v9. + +## Event Timeline [](/x/introduction/licensing/#premium-plan 'Premium plan') + +The Event Timeline puts time on one axis and resources on the other, which is the model teams use for scheduling operations. +In this alpha, Event Timeline is available as a preview feature under the Premium plan. + +It fits dispatching, workforce shifts, room/equipment allocation, manufacturing plans, and logistics boards where the key question is "who is doing what, when" across many parallel resources. + +The point is one underlying schedule that can be re-visualized without rewriting your domain layer: start in Event Calendar when date-first UX is enough, move to Timeline when resource density and conflict management become central. + +
+ +
Timeline in MUI X Scheduler (Premium).
+
+ +## Community and Premium [](/x/introduction/licensing/#premium-plan 'Premium plan') + +As with other MUI X products, Scheduler ships with open-source and commercial tiers (see [MUI X pricing](/pricing/)). + +The Community plan (MIT) targets the core interactive calendar: resource‑aware layouts, multiple views, drag to move and resize, and a fast path to a credible scheduling UI without hand‑rolling hit targets and drag-and-drop. + +Premium (commercial) adds what enterprises usually need next: recurrence, lazy loading, and richer timeline experiences for dense schedules, with virtualization for huge event grids planned for the stable release. + +Most teams can prove UX on Community and move up when recurrence or massive event counts demand it. + +## What's next + +- Event Timeline virtualization, lazy loading, and infinite loading. +- Resource views for the Event Calendar. +- Mobile version for the Event Calendar. +- Integration with existing calendars (ICS import/export, Google Calendar sync, and more). + +## Further reading + +- [Material UI and MUI X v9 overview](/blog/introducing-mui-v9/) +- [Material UI v9](/blog/introducing-material-ui-v9/) +- [MUI X Data Grid v9.0](/blog/introducing-mui-x-data-grid-v9/) +- [MUI X Charts v9.0](/blog/introducing-mui-x-charts-v9/) +- [MUI X v9.0: Tree View, Date Pickers](/blog/introducing-mui-x-tree-view-and-pickers-v9/) +- [MUI X Chat v9 alpha](/blog/introducing-mui-x-chat-v9-alpha/) + +## We want your feedback + +Your input drives our direction. +Join our GitHub communities today to share your insights, report issues, and help shape the future. +Visit [MUI X on GitHub](https://github.com/mui/mui-x/issues?q=is%3Aissue%20label%3A%22scope%3A%20scheduler%22). diff --git a/docs/pages/blog/introducing-mui-x-tree-view-and-pickers-v9.js b/docs/pages/blog/introducing-mui-x-tree-view-and-pickers-v9.js new file mode 100644 index 00000000000000..bbc5b6fd999207 --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-tree-view-and-pickers-v9.js @@ -0,0 +1,6 @@ +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { docs } from './introducing-mui-x-tree-view-and-pickers-v9.md?muiMarkdown'; + +export default function Page() { + return ; +} diff --git a/docs/pages/blog/introducing-mui-x-tree-view-and-pickers-v9.md b/docs/pages/blog/introducing-mui-x-tree-view-and-pickers-v9.md new file mode 100644 index 00000000000000..ea2cc357e70963 --- /dev/null +++ b/docs/pages/blog/introducing-mui-x-tree-view-and-pickers-v9.md @@ -0,0 +1,69 @@ +--- +title: 'MUI X v9.0: Tree View, Date Pickers' +description: 'Tree View and Date and Time Pickers in MUI X v9: virtualization-by-default trees, picker field and focus ergonomics, locales, and migration-oriented cleanups.' +date: 2026-04-08T08:00:00.000Z +authors: ['josefreitas'] +tags: ['MUI X', 'Product'] +manualCard: false +hideFromHomeList: true +--- + +In v9, we focused: large trees that stay fast and predictable, and pickers that behave well on keyboard, in forms, and next to other controls, with locale and adapter coverage that stays aligned with all the other components. + +For line‑item changes, follow the [MUI X releases](https://github.com/mui/mui-x/releases) timeline. + +This new major is part of a coordinated effort across the entire product suite; for a complete look at the MUI ecosystem changes, check out the [Introducing Material UI and MUI X v9](/blog/introducing-mui-v9/) blog post. + +## Table of contents + +- [Date and Time Pickers](#date-and-time-pickers) +- [Tree View](#tree-view) [](/x/introduction/licensing/#pro-plan 'Pro plan') +- [Migration guides](#migration-guides) + +## Date and Time Pickers + +Pickers in v9 continue the keyboard‑first calendar work: move through day, month, and year without treating pointer interaction as mandatory. +`fieldRef` stabilizes with `clearValue`, which matters in long forms, filters, and anywhere "reset this field" must be reliable. + +We also smoothed focus when dismissing the popover so click‑away is less likely to strand focus on the wrong control, especially near dialogs, drawers, and embedded grid filters. +Locales and adapters expand (for example, `thTH` in step with the Data Grid, and `AdapterDayjsBuddhist` for non‑Gregorian cases); if you use range pickers across zones, re‑validate edge cases after upgrading. + +Some cleanup changes are also important in v9: + +- [#21966](https://github.com/mui/mui-x/pull/21966): removes `enableAccessibleFieldDOMStructure`; the accessible field DOM is now the only supported mode, with codemod support. +- [#21739](https://github.com/mui/mui-x/pull/21739): removes `PickersDay` and promotes `PickerDay2` as the default day component API. + +The [Date and Time Pickers](/x/react-date-pickers/) docs (including migration notes) remain the source of truth for API deltas as v9 stabilizes. + +## Tree View [](/x/introduction/licensing/#pro-plan 'Pro plan') + +Rich Tree View Pro in v9 ships virtualization on by default, with an explicit opt‑out when you need a non‑virtualized layout. +That shift comes with practical defaults (for example, row height, set `itemHeight` when content differs). Also, v9 changed Rich Tree View Pro events from a nested tree shape to a flat list (called out in the v9 alpha release notes), which is required to add support for virtualization. + +API and styling hygiene matter too: older model and ref hooks are replaced by the richer variants (`useRichTreeViewApiRef`, `useSimpleTreeViewApiRef`, `useRichTreeViewProApiRef`), `TreeViewBaseItem` is removed in favor of documented model shapes, and state tokens on `treeItemClasses` that encoded expanded/selected styling are dropped in favor of `data-*` attributes you can target in CSS. + +If you maintain custom themes or imperative code against trees, budget time to revisit refs, virtualization assumptions, and selectors that depended on the old classes. + +Full API notes live in the [Tree View](/x/react-tree-view/) documentation. + +## Migration guides + +For a complete list of breaking changes and codemod steps, use the dedicated migration guides: + +- [Date and Time Pickers: Migration from v8 to v9](/x/migration/migration-pickers-v8/) +- [Tree View: Migration from v8 to v9](/x/migration/migration-tree-view-v8/) + +## Further reading + +- [Material UI and MUI X v9 overview](/blog/introducing-mui-v9/) +- [Material UI v9](/blog/introducing-material-ui-v9/) +- [MUI X Data Grid v9.0](/blog/introducing-mui-x-data-grid-v9/) +- [MUI X Charts v9.0](/blog/introducing-mui-x-charts-v9/) +- [MUI X Scheduler v9 alpha](/blog/introducing-mui-x-scheduler-v9-alpha/) +- [MUI X Chat v9 alpha](/blog/introducing-mui-x-chat-v9-alpha/) + +## We want your feedback + +Your input drives our direction. +Join our GitHub communities today to share your insights, report issues, and help shape the future. +Visit [MUI X on GitHub](https://github.com/mui/mui-x/issues?q=is%3Aissue%20label%3A%22scope%3A%20tree%20view%22%20OR%20label%3A%22scope%3A%20pickers%22). diff --git a/docs/public/static/blog/introducing-material-ui-v9/menubar.mp4 b/docs/public/static/blog/introducing-material-ui-v9/menubar.mp4 new file mode 100644 index 00000000000000..39c69d98f77672 Binary files /dev/null and b/docs/public/static/blog/introducing-material-ui-v9/menubar.mp4 differ diff --git a/docs/public/static/blog/introducing-material-ui-v9/number-field.mp4 b/docs/public/static/blog/introducing-material-ui-v9/number-field.mp4 new file mode 100644 index 00000000000000..70064583f0caab Binary files /dev/null and b/docs/public/static/blog/introducing-material-ui-v9/number-field.mp4 differ diff --git a/docs/public/static/blog/introducing-mui-v9/intro.png b/docs/public/static/blog/introducing-mui-v9/intro.png new file mode 100644 index 00000000000000..31efe54b45c616 Binary files /dev/null and b/docs/public/static/blog/introducing-mui-v9/intro.png differ diff --git a/docs/public/static/blog/introducing-mui-v9/v9-ecosystem-overview.png b/docs/public/static/blog/introducing-mui-v9/v9-ecosystem-overview.png new file mode 100644 index 00000000000000..b74a8c3f557ccc Binary files /dev/null and b/docs/public/static/blog/introducing-mui-v9/v9-ecosystem-overview.png differ diff --git a/docs/public/static/blog/introducing-mui-x-charts-v9/candlestick.mp4 b/docs/public/static/blog/introducing-mui-x-charts-v9/candlestick.mp4 new file mode 100644 index 00000000000000..f23695d0ccce7d Binary files /dev/null and b/docs/public/static/blog/introducing-mui-x-charts-v9/candlestick.mp4 differ diff --git a/docs/public/static/blog/introducing-mui-x-charts-v9/rangebar.mp4 b/docs/public/static/blog/introducing-mui-x-charts-v9/rangebar.mp4 new file mode 100644 index 00000000000000..8df6ac0579bf95 Binary files /dev/null and b/docs/public/static/blog/introducing-mui-x-charts-v9/rangebar.mp4 differ diff --git a/docs/public/static/blog/introducing-mui-x-charts-v9/stub_charts-overview.png b/docs/public/static/blog/introducing-mui-x-charts-v9/stub_charts-overview.png new file mode 100644 index 00000000000000..8b137891791fe9 --- /dev/null +++ b/docs/public/static/blog/introducing-mui-x-charts-v9/stub_charts-overview.png @@ -0,0 +1 @@ + diff --git a/docs/public/static/blog/introducing-mui-x-chat-v9-alpha/chat-showcase.mp4 b/docs/public/static/blog/introducing-mui-x-chat-v9-alpha/chat-showcase.mp4 new file mode 100644 index 00000000000000..1a27283d14a9c5 Binary files /dev/null and b/docs/public/static/blog/introducing-mui-x-chat-v9-alpha/chat-showcase.mp4 differ diff --git a/docs/public/static/blog/introducing-mui-x-data-grid-v9/ai-assistant-showcase.mp4 b/docs/public/static/blog/introducing-mui-x-data-grid-v9/ai-assistant-showcase.mp4 new file mode 100644 index 00000000000000..18b0761cbd65fa Binary files /dev/null and b/docs/public/static/blog/introducing-mui-x-data-grid-v9/ai-assistant-showcase.mp4 differ diff --git a/docs/public/static/blog/introducing-mui-x-data-grid-v9/charts-integration.mp4 b/docs/public/static/blog/introducing-mui-x-data-grid-v9/charts-integration.mp4 new file mode 100644 index 00000000000000..ac5697351461e3 Binary files /dev/null and b/docs/public/static/blog/introducing-mui-x-data-grid-v9/charts-integration.mp4 differ diff --git a/docs/public/static/blog/introducing-mui-x-data-grid-v9/stub_datagrid-ai-assistant.png b/docs/public/static/blog/introducing-mui-x-data-grid-v9/stub_datagrid-ai-assistant.png new file mode 100644 index 00000000000000..8b137891791fe9 --- /dev/null +++ b/docs/public/static/blog/introducing-mui-x-data-grid-v9/stub_datagrid-ai-assistant.png @@ -0,0 +1 @@ + diff --git a/docs/public/static/blog/introducing-mui-x-data-grid-v9/stub_datagrid-overview.png b/docs/public/static/blog/introducing-mui-x-data-grid-v9/stub_datagrid-overview.png new file mode 100644 index 00000000000000..8b137891791fe9 --- /dev/null +++ b/docs/public/static/blog/introducing-mui-x-data-grid-v9/stub_datagrid-overview.png @@ -0,0 +1 @@ + diff --git a/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-calendar.mp4 b/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-calendar.mp4 new file mode 100644 index 00000000000000..ff36bef8f57cf9 Binary files /dev/null and b/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-calendar.mp4 differ diff --git a/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-showcase.png b/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-showcase.png new file mode 100644 index 00000000000000..9bc146e0b52139 Binary files /dev/null and b/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-showcase.png differ diff --git a/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-timeline.mp4 b/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-timeline.mp4 new file mode 100644 index 00000000000000..963ad0b35276d3 Binary files /dev/null and b/docs/public/static/blog/introducing-mui-x-scheduler-v9-alpha/scheduler-timeline.mp4 differ diff --git a/docs/public/static/blog/introducing-mui-x-v9-tree-view-and-pickers/stub_date-pickers-highlights.png b/docs/public/static/blog/introducing-mui-x-v9-tree-view-and-pickers/stub_date-pickers-highlights.png new file mode 100644 index 00000000000000..8b137891791fe9 --- /dev/null +++ b/docs/public/static/blog/introducing-mui-x-v9-tree-view-and-pickers/stub_date-pickers-highlights.png @@ -0,0 +1 @@ + diff --git a/docs/public/static/blog/introducing-mui-x-v9-tree-view-and-pickers/stub_tree-view-highlights.png b/docs/public/static/blog/introducing-mui-x-v9-tree-view-and-pickers/stub_tree-view-highlights.png new file mode 100644 index 00000000000000..8b137891791fe9 --- /dev/null +++ b/docs/public/static/blog/introducing-mui-x-v9-tree-view-and-pickers/stub_tree-view-highlights.png @@ -0,0 +1 @@ + diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index 97ec732740b05a..2cdfa4e1de9491 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -233,6 +233,7 @@ const Root = styled('div')( borderColor: (theme.vars || theme).palette.grey[200], borderRadius: 8, display: 'block', + objectFit: 'cover', margin: 'auto', marginBottom: 16, },