サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Google I/O
mui.com
Ready-to-use foundational React components, free forever.
Check out MUI's CEO Olivier Tassinari introducing Pigment CSS at React Conf 2024: In the era of React Server Components and the Next.js App Router, component libraries like Material UI have an opportunity to gain performance improvements by moving rendering work from the client to the server. Trouble is, the "traditional" CSS-in-JS solutions we rely on aren't able to come along with us because the
Skip to content🚀 Influence MUI's 2024 roadmap! Participate in the latest Developer Survey →
While Material UI is excellent for building sleek user interfaces that adhere closely to Material Design, it can become unwieldy when your design system diverges significantly from the defaults. We get it. We've all been there. That's why we're building an entirely new library of headless React UI components and hooks called MUI Base—to give you complete control over the look and feel of your user
@mui/base has been deprecated and has been replaced by Base UI. We strongly recommend using the new package instead. MUI Base - OverviewMUI Base is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features. IntroductionMUI Base is a library of unstyled React UI components and hooks. These components were extrac
Joy UI - OverviewJoy UI is an open-source React component library that implements MUI's own design principles. IntroductionJoy UI is an open-source React component library that follows a lightly opinionated design direction, for a clean and modern UI that gives you plenty of room to customize the look and feel. Why use Joy UIMaintained by MUI, Joy UI is an alternative to Material UI for projects t
If you're a close follower of everything MUI, you might be aware that we've been working on a new design system. If not, then this post will give you a first look at Joy UI－MUI's new starting point for your design system! If you've ever considered using Material UI because of the developer experience, reliability, and completeness, but hesitated because of the design, this is great news for you. J
CodeSandbox You can find it in styled-components, emotion, goober, stitches, or linaria. While Material UI is compatible with any styling solution (as long as the styles have more specificity, for example, Tailwind CSS), many developers still felt the need to learn something new: the makeStyles API. Our React integration with JSS (@mui/styles) is too slow to unlock the next layer of customization
Starting today we are evolving our brand identity to clarifying the difference between our company and our products. Material-UI: the Material Design components developed by MUI is now called Material UI, we ditched the hyphen! Material-UI: the organization is now called MUI. Material-UI X: the set of advanced React components is now called MUI X. Material-UI: the set of foundational MIT React com
A collection of examples and scaffolds integrating Material UI with popular libraries and frameworks. Official integrations The following integration examples are available in the /examples folder of the Material UI GitHub repository. These examples feature Material UI paired with other popular React libraries and frameworks, so you can skip the initial setup steps and jump straight into building.
A comprehensive UI kit with over 600 handcrafted Material UI, MUI X, and Joy UI components for Figma. Includes 600+ high-quality components—ready to use and customize—kept up-to-date with the React component libraries (Material UI, Joy UI, and MUI X) 1,000+ icons grouped and named consistently with Material Icons in 5 themes 100+ customizable color, typography, and elevation styles 50+ frames with
Learn more about the tools you can leverage to reduce the bundle size. Bundle size mattersMaterial UI's maintainers take bundle size very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages. Combined with dangerJS we can inspect detailed bundle size changes on every Pull Request. When and how to use tree-shaking?Tree-shaking Material UI works
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. If you are new to or unfamiliar with flexbox, we encourage you to read this CSS-Tricks flexbox guide. Properties for the Parentdisplay
The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. The Grid component works well for a layout with a known number of columns. The columns can be configured with multiple breakpoints to specify the column span of each child. How it worksThe grid system is implemented with the Grid component: It uses CSS Flexbox (rather than CSS Grid) for high flex
<TextField id="outlined-basic" label="Outlined" variant="outlined" /> <TextField id="filled-basic" label="Filled" variant="filled" /> <TextField id="standard-basic" label="Standard" variant="standard" /> <TextField id="outlined-basic" label="Outlined" variant="outlined" /> <TextField id="filled-basic" label="Filled" variant="filled" /> <TextField id="standard-basic" label="Standard" variant="stand
This tree view allows you to explore how the theme object looks like with the default values. If you want to learn more about how the theme is assembled, take a look at material-ui/style/createTheme.ts, and the related imports which createTheme() uses. You can play with the documentation theme object in your browser console, as the theme variable is exposed on all the documentation pages.
2,100+ ready-to-use React Material Icons from the official website. @mui/icons-material includes the 2,100+ official Material Icons converted to SvgIcon components. It depends on @mui/material, which requires Emotion packages. Use one of the following commands to install it:
ListsLists are continuous, vertical indexes of text or images. Lists are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. IntroductionLists present information in a concise, easy-to-follow format through a continuous, vertical index of text or images. Material UI Lists are implemented using a coll
Material UI tries to make composition as easy as possible. Wrapping componentsTo provide maximum flexibility and performance, Material UI needs a way to know the nature of the child elements a component receives. To solve this problem, we tag some of the components with a muiName static property when needed. You may, however, need to wrap a component in order to enhance it, which can conflict with
React templatesBrowse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React marketing page, and more. Free templatesOur curated collection of free Material UI templates includes a dashboard, a marketing page, a checkout flow, sign-in and sign-up pages, and a blog. You can download each one directly from the source code or via C
Basic selectMenus are positioned under their emitting elements, unless they are close to the bottom of the viewport. <FormControl fullWidth> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id="demo-simple-select" value={age} label="Age" onChange={handleChange} > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuIte
React components for faster and simpler web development. Build your own design system, or start with Material Design. Material UI v4 has finally arrived. We are so excited about this release, as it defines better foundations for the UI components. Thank you to everyone, especially to the team, and to everyone who's contributed code, issue triage, and support. Thank you. ✨✨✨ See the 4.0.0 Release N
The most common use case for server-side rendering is to handle the initial render when a user (or search engine crawler) first requests your app. When the server receives the request, it renders the required component(s) into an HTML string, and then sends it as a response to the client. From that point on, the client takes over rendering duties. Material UI on the serverMaterial UI was designed
MUI System - OverviewMUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs. IntroductionMUI System is a set of CSS utilities to help you build custom designs more efficiently. It's used internally by libraries like Material UI, Joy UI. It can also be used to style MUI Base components. MUI System gives you a se
Snackbars (also known as toasts) are used for brief notifications of processes that have been or will be performed. IntroductionThe Snackbar component appears temporarily and floats above the UI to provide users with (non-critical) updates on an app's processes. The demo below, inspired by Google Keep, shows a basic Snackbar with a text element and two actions: <Button onClick={handleClick}>Open S
You can add static typing to JavaScript to improve developer productivity and code quality thanks to TypeScript. Minimum configuration Material UI requires a minimum version of TypeScript 4.9. Have a look at the Vite.js with TypeScript example. For types to work, it's recommended that you have at least the following options enabled in your tsconfig.json: { "compilerOptions": { "lib": ["es6", "dom"
Convey meaning through color. Out of the box you get access to all colors in the Material Design guidelines. The Material Design color system can be used to create a color theme that reflects your brand or style. Picking colorsOfficial color toolThe Material Design team has also built an awesome palette configuration tool: material.io/resources/color/. This can help you create a color palette for
While you can use the Emotion-based styling solution provided by Material UI, you can also use the one you already know, from plain CSS to styled-components. This guide aims to document the most popular alternatives, but you should find that the principles applied here can be adapted to other libraries. There are examples for the following styling solutions: Plain CSS Global CSS Styled Components
次のページ
このページを最初にブックマークしてみませんか？
『MUI: The React component library you always wanted』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
