0
# MUI Lab
1
2
MUI Lab is the experimental laboratory for new Material UI components that are not yet ready to move to the core library. It provides incubator components including enhanced navigation tabs, masonry layout, timeline components, and legacy deprecated components that have been moved to dedicated packages.
3
4
**Important:** Many components have been migrated to dedicated packages: date/time pickers moved to `@mui/x-date-pickers`, tree components to `@mui/x-tree-view`, and LoadingButton functionality integrated into `@mui/material/Button`. These components remain in `@mui/lab` as deprecated stubs that show migration warnings.
5
6
## Package Information
7
8
- **Package Name**: @mui/lab
9
- **Package Type**: npm
10
- **Language**: TypeScript/JavaScript
11
- **Installation**: `npm install @mui/lab @mui/material @emotion/react @emotion/styled`
12
- **Peer Dependencies**: @mui/material (required), @emotion/react and @emotion/styled (optional but recommended)
13
14
## Core Imports
15
16
**Active Components:**
17
```typescript
18
import { TabContext, TabList, TabPanel } from '@mui/lab';
19
import { Timeline, TimelineItem, TimelineContent, TimelineDot, TimelineSeparator, TimelineConnector, TimelineOppositeContent } from '@mui/lab';
20
import { Masonry } from '@mui/lab';
21
import { useAutocomplete } from '@mui/lab';
22
```
23
24
**Deprecated Components (available but show warnings):**
25
```typescript
26
// These will show deprecation warnings and redirect to new packages
27
import { DatePicker, TreeView, LoadingButton } from '@mui/lab';
28
```
29
30
For CommonJS:
31
```javascript
32
const { TabContext, TabList, TabPanel, Masonry } = require('@mui/lab');
33
```
34
35
## Basic Usage
36
37
```typescript
38
import React from 'react';
39
import { TabContext, TabList, TabPanel } from '@mui/lab';
40
import { Tab, Box } from '@mui/material';
41
42
function BasicTabs() {
43
const [value, setValue] = React.useState('1');
44
45
return (
46
<TabContext value={value}>
47
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
48
<TabList onChange={(event, newValue) => setValue(newValue)}>
49
<Tab label="Item One" value="1" />
50
<Tab label="Item Two" value="2" />
51
</TabList>
52
</Box>
53
<TabPanel value="1">Item One Content</TabPanel>
54
<TabPanel value="2">Item Two Content</TabPanel>
55
</TabContext>
56
);
57
}
58
```
59
60
## Architecture
61
62
MUI Lab components are built on the Material-UI foundation with several key design patterns:
63
64
- **Context-based Navigation**: Tab components use React Context for coordinated state management
65
- **Responsive Layout**: Masonry component supports responsive breakpoints and dynamic sizing
66
- **Composite Timeline**: Timeline components work together as a coordinated system for rich temporal displays
67
- **Material-UI Integration**: All components support theming, styling via `sx` prop, and custom CSS classes
68
- **Accessibility**: Built-in ARIA attributes and keyboard navigation support
69
70
## Capabilities
71
72
### Enhanced Tab Navigation
73
74
Advanced tab functionality with context-based coordination and automatic ARIA attribute management for accessible navigation.
75
76
```typescript { .api }
77
// Context provider for tab coordination
78
function TabContext(props: TabContextProps): JSX.Element;
79
80
interface TabContextProps {
81
children?: React.ReactNode;
82
value: string | number;
83
}
84
```
85
86
[Tab Navigation](./tabs.md)
87
88
### Masonry Layout
89
90
Pinterest-style masonry layout with responsive column configuration and flexible spacing options for dynamic content grids.
91
92
```typescript { .api }
93
function Masonry(props: MasonryProps): JSX.Element;
94
95
interface MasonryProps {
96
children: NonNullable<React.ReactNode>;
97
columns?: ResponsiveStyleValue<number | string>;
98
spacing?: ResponsiveStyleValue<number | string>;
99
sequential?: boolean;
100
}
101
```
102
103
[Masonry Layout](./masonry.md)
104
105
### Timeline Components
106
107
Complete timeline system with positioning, styling, and content organization for displaying chronological information. Includes all components for building rich temporal displays.
108
109
```typescript { .api }
110
function Timeline(props: TimelineProps): JSX.Element;
111
function TimelineItem(props: TimelineItemProps): JSX.Element;
112
function TimelineContent(props: TimelineContentProps): JSX.Element;
113
function TimelineDot(props: TimelineDotProps): JSX.Element;
114
function TimelineConnector(props: TimelineConnectorProps): JSX.Element;
115
function TimelineSeparator(props: TimelineSeparatorProps): JSX.Element;
116
function TimelineOppositeContent(props: TimelineOppositeContentProps): JSX.Element;
117
118
interface TimelineProps {
119
position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
120
children?: React.ReactNode;
121
}
122
```
123
124
[Timeline System](./timeline.md)
125
126
### Autocomplete Hook
127
128
React hook providing autocomplete functionality with filtering and selection management (re-exported from @mui/material).
129
130
```typescript { .api }
131
function useAutocomplete<T>(props: UseAutocompleteProps<T>): UseAutocompleteReturnValue<T>;
132
```
133
134
[Autocomplete Hook](./autocomplete.md)
135
136
## Common Types
137
138
```typescript { .api }
139
// Standard Material-UI component props
140
interface StandardProps<T = {}> extends T {
141
className?: string;
142
classes?: object;
143
sx?: SxProps<Theme>;
144
}
145
146
// Responsive value type for breakpoint-aware properties
147
type ResponsiveStyleValue<T> = T | { xs?: T; sm?: T; md?: T; lg?: T; xl?: T; };
148
149
// Theme system integration
150
interface Theme {
151
palette: object;
152
typography: object;
153
spacing: (value: number) => string;
154
breakpoints: {
155
values: { xs: number; sm: number; md: number; lg: number; xl: number };
156
};
157
}
158
159
// Styling prop type
160
type SxProps<T> = object | ((theme: T) => object);
161
```
162
163
## CSS Classes and Utilities
164
165
MUI Lab exports CSS classes for theming and styling customization of all active components:
166
167
```typescript { .api }
168
// CSS classes for component styling
169
import { tabPanelClasses } from '@mui/lab/TabPanel';
170
import { masonryClasses } from '@mui/lab/Masonry';
171
import {
172
timelineClasses,
173
timelineItemClasses,
174
timelineContentClasses,
175
timelineDotClasses,
176
timelineConnectorClasses,
177
timelineSeparatorClasses,
178
timelineOppositeContentClasses
179
} from '@mui/lab';
180
181
// CSS class interfaces
182
interface TabPanelClasses {
183
root: string;
184
hidden: string;
185
}
186
187
interface MasonryClasses {
188
root: string;
189
}
190
191
interface TimelineClasses {
192
root: string;
193
positionLeft: string;
194
positionRight: string;
195
positionAlternate: string;
196
positionAlternateReverse: string;
197
}
198
199
interface TimelineDotClasses {
200
root: string;
201
colorGrey: string;
202
colorInherit: string;
203
colorPrimary: string;
204
colorSecondary: string;
205
colorError: string;
206
colorInfo: string;
207
colorSuccess: string;
208
colorWarning: string;
209
variantFilled: string;
210
variantOutlined: string;
211
}
212
```
213
214
## Deprecated Components
215
216
Many components have been moved to dedicated packages but remain available as deprecated stubs that show migration warnings.
217
218
```typescript { .api }
219
// Complete list of deprecated exports (show warnings when used)
220
export { CalendarPicker, ClockPicker, DatePicker, DateRangePicker, DateTimePicker, TimePicker };
221
export { DesktopDatePicker, DesktopDateRangePicker, DesktopDateTimePicker, DesktopTimePicker };
222
export { MobileDatePicker, MobileDateRangePicker, MobileDateTimePicker, MobileTimePicker };
223
export { StaticDatePicker, StaticDateRangePicker, StaticDateTimePicker, StaticTimePicker };
224
export { CalendarPickerSkeleton, PickersDay, DateRangePickerDay, MonthPicker, YearPicker };
225
export { LocalizationProvider, AdapterDateFns, AdapterDayjs, AdapterLuxon, AdapterMoment };
226
export { TreeView, TreeItem, LoadingButton };
227
```
228
229
[Deprecated Components Migration Guide](./deprecated-components.md)
230
231
## Migration Notes
232
233
### Summary of Deprecated Components
234
235
**Date/Time Pickers → @mui/x-date-pickers:**
236
- CalendarPicker, ClockPicker, DatePicker, DateRangePicker, DateTimePicker, TimePicker
237
- Desktop/Mobile/Static variants: DesktopDatePicker, DesktopDateRangePicker, DesktopDateTimePicker, DesktopTimePicker, MobileDatePicker, MobileDateRangePicker, MobileDateTimePicker, MobileTimePicker, StaticDatePicker, StaticDateRangePicker, StaticDateTimePicker, StaticTimePicker
238
- Date utilities: CalendarPickerSkeleton, PickersDay, DateRangePickerDay, MonthPicker, YearPicker
239
- LocalizationProvider and date adapters: AdapterDateFns, AdapterDayjs, AdapterLuxon, AdapterMoment
240
241
**Tree Components → @mui/x-tree-view:**
242
- TreeView, TreeItem
243
244
**Button Enhancement → @mui/material/Button:**
245
- LoadingButton (functionality now integrated into core Button component)
246
247
### Migration Example
248
249
```typescript
250
// Old (deprecated)
251
import { DatePicker } from '@mui/lab';
252
253
// New (recommended)
254
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
255
```