Type alias CSSVariableForCubeSize

If you want custom breakpoints, you should set the --cube-css-size CSS variable on the cube or any wrapping component above with your own breakpoints.

You should set useCSSVariableForCubeSize to true so that the cube doesn't show errors because you didn't provide a sizes object or the string "default" for the sizes prop.

The CSS sizing has priority even if the variable useCSSVariableForCubeSize is not set. So if you want to use the sizes object, make sure to not provide the CSS variable.

.css-cube-sizing {
--cube-css-size: 100vw;
}

@media (min-width: 1000px) {
  .css-cube-sizing {
    --cube-css-size: 50vw;
  }
}

@media (min-width: 2000px) {
   .css-cube-sizing {
     --cube-css-size: 20vw;
   }
 }
Copy

 <Cube
   perspective="none"
   transitionDuration="1s"
   transitionTimingFunction="linear"
   currentFace="front"
   faces={faces}
   // set the CSS variable on the container (or any wrapping component above if you want)
   containerAdditionalClasses="css-cube-sizing"
   useCSSVariableForCubeSize={true}
   // or just useCSSVariableForCubeSize since the prop value will default to true
   useCSSVariableForCubeSize
 />

Copy