ReScript Bindings for MUI (WIP!)

Installation

1. Install all necessary packages according to the official MUI-Material installation guide: https://mui.com/material-ui/getting-started/installation/.
2. Install @rescript-mui/material

npm install @rescript-mui/material

3. Add it to dependencies in your bsconfig.json:

{
  "bs-dependencies": ["@rescript-mui/material"]
}

This library provides ReScript bindings for MUI.

These bindings will only work with ReScript 11 (uncurried mode) and JSX version 4, as it enables us to utilize untagged variants, optional record fields, and record props spread. The latter is especially important, as we are finally able to inherit props from one component to another more easily.

What happened to the bindings for Material-UI 4?

They are still available, check out the old website: https://rescript-material-ui.cca.io/.

Why no new website?

1. One of the goals of this rewrite is to make the usage of MUI in ReScript more accessible. In the best case you never need to leave your editor, since now we have doc comments for (almost) every property.
2. It just takes too much time to maintain.
3. In our opinion, it is much more useful (albeit not as pretty) to just have a look at the examples folder.

What's inside?

NOTE: @mui/styles will never be implemented, as it is the legacy styling solution which is not compatible with React.StrictMode or React 18.

Progress

MUI-Material

Components

• Accordion
• AccordionActions
• AccordionDetails
• AccordionSummary
• Alert
• AlertTitle
• AppBar
• Autocomplete
• Avatar
• AvatarGroup
• Backdrop
• Badge
• BottomNavigation
• BottomNavigationAction
• Box
• Breadcrumbs
• Button
• ButtonBase
• ButtonGroup
• Card
• CardActionArea
• CardActions
• CardContent
• CardHeader
• CardMedia
• Checkbox
• Chip
• CircularProgress
• Collapse
• Container
• CssBaseline
• Dialog
• DialogActions
• DialogContent
• DialogContentText
• DialogTitle
• Divider
• Drawer
• Fab
• Fade
• FilledInput
• FormControl
• FormControlLabel
• FormGroup
• FormHelperText
• FormLabel
• GlobalStyles
• Grid
• Grow
• Hidden
• Icon
• IconButton
• ImageList
• ImageListItem
• ImageListItemBar
• Input
• InputAdornment
• InputBase
• InputLabel
• LinearProgress
• Link
• List
• ListItem
• ListItemAvatar
• ListItemButton
• ListItemIcon
• ListItemSecondaryAction
• ListItemText
• ListSubheader
• Menu
• MenuItem
• MenuList
• MobileStepper
• Modal
• NativeSelect
• OutlinedInput
• Pagination
• PaginationItem
• Paper
• Popover
• Popper
• Radio
• RadioGroup
• Rating
• ScopedCssBaseline
• Select
• Skeleton
• Slide
• Slider
• Snackbar
• SnackbarContent
• SpeedDial
• SpeedDialAction
• SpeedDialIcon
• Stack
• Step
• StepButton
• StepConnector
• StepContent
• StepIcon
• StepLabel
• Stepper
• StyledEngineProvider
• SvgIcon
• Switch
• SwipeableDrawer
• Tab
• Table
• TableBody
• TableCell
• TableContainer
• TableFooter
• TableHead
• TablePagination
• TableRow
• TableSortLabel
• Tabs
• TabScrollButton
• TextField
• ToggleButton
• ToggleButtonGroup
• Toolbar
• Tooltip
• Typography
• Zoom

Theming

• Theme
• ThemeHelpers
• ThemeOptions
• ThemeProvider

MUI-LAB

• LoadingButton
• Masonry
• TabContext
• TabList
• TabPanel
• Timeline
• TimelineConnector
• TimelineContent
• TimelineDot
• TimelineItem
• TimelineOppositeContent
• TimelineSeparator
• TreeItem
• TreeView

MUI-X Date Pickers

• AdapterDateFns
• AdapterDateFnsJalali
• AdapterDayjs
• AdapterLuxon
• AdapterMoment
• AdapterMomentHijri
• AdapterMomentJalaali
• DateCalendar
• DateField
• DatePicker
• DateTimeField
• DateTimePicker
• DayCalendarSkeleton
• DesktopDatePicker
• DesktopDateTimePicker
• DesktopTimePicker
• DigitalClock
• LocalizationProvider
• MobileDatePicker
• MobileDateTimePicker
• MobileTimePicker
• MonthCalendar
• MultiSectionDigitalClock
• PickersActionBar
• PickersDay
• PickersLayout
• PickersShortcuts
• StaticDatePicker
• StaticDateTimePicker
• StaticTimePicker
• TimeClock
• TimeField
• TimePicker
• YearCalendar

Documentation

See documentation.

Changelog

See CHANGELOG.

Contributing

See CONTRIBUTING.