Before you begin browsing

What is this page for?

This page shows how to maximize the benefit of Material-UI Treasury. Please read to the end of the page if this is the first time you have seen it.

For components tab, it is divided into 3 section (as you can see it in the panel on your left side).

Material-UI Extended

These are components that are extended from Material-UI directly. We aim to showcase them in a more practical way, closer to how we use them in real life.

For example, Birthday TextField

This component uses the official InputBase as a main ingredient, then compose with some react hook logic and turn it to a powerful form input. (Most of these have test coverage)

yarn add @material-ui/core
yarn add @mui-treasury/components
// in react component
import Birthday from "@mui-treasury/components/textField/birthday"

Community Custom

For this category, the main ingredient is the official styling solution plus developer’s creativity. Mostly, they are inspiration from mockup or visual design that we want to turn them into life. Some material-ui can be included but the majority are native html elements.

For example, TextInfo CardContent

It is composed of 3 Typographys with specific responsibility (overline heading & body). Then we create a bunch of different styles that follow the same api (think of them like Lego that should match in order to be compatible).

See all TextInfoContent styles

yarn add @mui-treasury/components
// in react component
import TextInfoContent from "@mui-treasury/components/content/textInfo"

Complex Composition

Finally, whatever components that you think it is complex (compose of other category’s component) lay on this category. This group is hard to have different styles because the CSS Api is quite different from each other. The most obvious component would be Card that contains other component like CardHeader, CardContent, CardFooter, CardActions and any custom component. Give the component a new name is better than trying to use the same CSS Api. For example, BlogCard, PlaneTicketCard …

See the code

Another important point is this category is not available in @mui-treasury/components since they are too specific and hard to be customized again. But if you like, you can copy the code in the website and then use it in your project.

Not available in @mui-treasury/components