The VuiTypography component provides different options for creating different typography elements. It uses MUI Typography in base and you can use all of the props from MUI Typographyfor the VuiTypography component.

The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.


// Vision UI Dashboard React components import VuiTypography from "components/VuiTypography";


Props Information

color'inherit''primary''secondary''info''success''warning''error''light''dark''text''white'darkChange the VuiTypography text color.
fontWeight'false''light''regular''medium''bold'falseChange the VuiTypography font weight.
textTransform'none''capitalize''uppercase''lowercase'noneSpecifies how to capitalize text inside the VuiTypography.
verticalAlign'unset''baseline''sub''super''text-top''text-bottom''middle''top''bottom'unsetSpecifies how to align text vertically inside the VuiTypography.
textGradientboolfalseIf true the VuiTypography text will be a gradient.
opacitynumber1Specifies the opacity of the text inside the VuiTypography.
children*nodeUse to pass node or content inside the VuiTypography, its the only required prop.
MUI PropsYou can pass all of the MUI Typography props for the VuiTypography as well.


// Vision UI Dashboard React components import VuiTypography from "components/VuiTypography";

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Subtitle 1
Subtitle 2

Body 1

Body 2

Button Caption Overline


Gradient Text

// Vision UI Dashboard React components import VuiTypography from "components/VuiTypography";

Gradient Text