@mui/lab

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);
      }}
    />
  );
}