# Material UI components

**URL:** <https://forum.builder.io/t/material-ui-components/4665>\
**Category:** Technical Questions\
**Tags:** styling, nextjs\
**Created:** [December 17, 2023, 12:46pm UTC](https://forum.builder.io/t/material-ui-components/4665 "2023-12-17T12:46:41Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Granite](https://avatars.discourse-cdn.com/v4/letter/g/77aa72/32.png) [@Granite](https://forum.builder.io/u/Granite)\
**Post date:** [December 17, 2023, 12:46pm UTC](https://forum.builder.io/t/material-ui-components/4665/1 "2023-12-17T12:46:41Z")

</div>

Hi Hi,

I’m currently working on a project where I need to integrate Material-UI/MUI components into [Builder.io](http://Builder.io). Specifically, I want to customize and configure a the styles properties (i.e. font size, typography varient, padding etc.) of a component to be compatible with [Builder.io](http://Builder.io).

Here’s a basic example of the code I’m working with:

```auto
import Typography from '@mui/material/Typography';

export interface BasicCardProps {
  subtitle: string;
  title: string;
  description: string;
  buttonText: string;
  // builderBlock: any;
}

export function BasicCard3(props: BasicCard3Props) {
  const { title, subtitle, description, buttonText } = props;
  return (
    <Card sx={{ minWidth: 275 }}>
      <CardContent>
        <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
          {subtitle}
        </Typography>
        <Typography variant="h5" component="div">
          {title}
        </Typography>
        <Typography sx={{ mb: 1.5 }} color="text.secondary">
          {description}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">{buttonText}</Button>
      </CardActions>
    </Card>
  );
}

```

I want to make this `BasicCard` component configurable through [Builder.io](http://Builder.io). Has anyone successfully accomplished this or has insights on how to achieve it? Any guidance on modifying the code to work seamlessly with [Builder.io](http://Builder.io), or suggestions on best practices, would be greatly appreciated.

Thank you!

---

<div class="post-metadata">

**Author:** ![anon43891756](https://avatars.discourse-cdn.com/v4/letter/a/50afbb/32.png) [@anon43891756](https://forum.builder.io/u/anon43891756)\
**Post date:** [December 20, 2023, 3:44pm UTC](https://forum.builder.io/t/material-ui-components/4665/2 "2023-12-20T15:44:41Z")

</div>

Hi @Granite, Welcome to the [Builder.io](http://Builder.io) Forum!

You can achieve this using Custom component functionality. Here is the complete guidance doc link [Intro to Integrating Custom Components - Builder.io](https://www.builder.io/c/docs/custom-components-intro)

---

<div class="post-metadata">

**Author:** ![Granite](https://avatars.discourse-cdn.com/v4/letter/g/77aa72/32.png) [@Granite](https://forum.builder.io/u/Granite)\
**Post date:** [December 20, 2023, 9:11pm UTC](https://forum.builder.io/t/material-ui-components/4665/3 "2023-12-20T21:11:25Z")

</div>

Hey, thank you! it doesnt answer the question, though - read this a few times and coundn’t come up with a solution