Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
The @mui/lab package is a collection of experimental components that are considered 'lab' because they are still in the experimental phase. These components are built on top of the core Material-UI library and provide additional, more complex components that are not yet ready for the stable release. The components in the lab package can be used to enhance the user interface with more advanced features while still maintaining the design consistency of Material-UI.
Date and Time Pickers
Provides components for picking dates and times, such as DatePicker, TimePicker, and DateTimePicker. These components allow users to easily select dates and times within their applications.
import { LocalizationProvider, DateTimePicker } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
function MyComponent() {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
label="DateTimePicker"
value={selectedDate}
onChange={handleDateChange}
/>
</LocalizationProvider>
);
}
Timeline
The Timeline component is used to display a list of events in chronological order. It is useful for creating visual timelines of events or processes.
import { Timeline, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent, TimelineDot } from '@mui/lab';
function MyTimeline() {
return (
<Timeline>
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>Step 1</TimelineContent>
</TimelineItem>
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent>Step 2</TimelineContent>
</TimelineItem>
</Timeline>
);
}
Rating
The Rating component allows users to provide feedback in the form of a star rating. It can be used for product reviews, user feedback, or other rating systems.
import { Rating } from '@mui/lab';
function MyRating() {
const [value, setValue] = useState(2);
return (
<Rating
name="simple-controlled"
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
/>
);
}
Ant Design (antd) is a design system with a set of high-quality React components. It offers similar functionalities to @mui/lab, such as date pickers and timelines, but with a different design philosophy inspired by Ant Design.
React Bootstrap provides Bootstrap components built with React. While it does not offer as many experimental components as @mui/lab, it does provide a set of stable, well-tested components that can be used to build complex UIs.
Blueprint is a React-based UI toolkit for the web. It is similar to @mui/lab in that it offers a range of components, including date and time pickers, but it is designed primarily for building complex data-dense interfaces for desktop applications.
This package hosts the incubator components that are not yet ready to move to core
.
Install the package in your project directory with:
// with npm
npm install @mui/lab
// with yarn
yarn add @mui/lab
The lab has a peer dependency on the Material Design components. If you are not already using MUI in your project, you can install it with:
// with npm
npm install @mui/material
// with yarn
yarn add @mui/material
FAQs
Laboratory for new MUI modules.
The npm package @mui/lab receives a total of 1,172,733 weekly downloads. As such, @mui/lab popularity was classified as popular.
We found that @mui/lab demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.