# Transitions

This component extends the original components provided by MUI: <https://mui.com/material-ui/transitions/>

The extended properties are:

| Property  | Type          | Props Value                                                           |
| --------- | ------------- | --------------------------------------------------------------------- |
| position  | string        | top-left (default), top, top-right, bottom-left, bottom, bottom-right |
| sx        | CSSProperties |                                                                       |
| type      | string        | grow (default), collapse, fade, slide                                 |
| direction | direction     | up (default), down, left, right                                       |

Live Preview: <https://mantisdashboard.com/dashboard/default> (Header Options)

{% hint style="info" %}
Asterisk (<mark style="color:red;">\*</mark>) indicates required props.
{% endhint %}

## Popup Transition

This represents the zoom transition for Dialog component.

Live Preview: <https://mantisdashboard.com/components-overview/dialogs>