React Box - Soft UI
The SoftBox component is a wrapper component which provides different CSS utlities for styling the elements. It uses MUI Box in base and you can use all of the props from MUI Boxfor the SoftBox component.
Its one of the most powerful components that give you all of the possibilites for providing styles for an element directly in JSX.
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.
Demo
// Soft UI Dashboard React components
import SoftBox from "components/SoftBox";
Box
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| bgColor | string | transparent | Change the SoftBox background color. |
| color | string | dark | Change the SoftBox text color. |
| variant | 'gradient''contained' | contained | Change the SoftBox background type. |
| opacity | number | 1 | Change the SoftBox opacity. |
| borderRadius | string | none | Set a border radius for the SoftBox. |
| shadow | string | none | Set a box shadow for the SoftBox. |
| MUI Props | You can pass all of the MUI System Properties for the SoftBox as well. |