Customizing Box Shadow - AstroLaunch UI

Customize the default Box Shadow for AstroLaunch UI and add your own custom box shadow values that you like to have for your project.

AstroLaunch UI provides a set of default box shadow values that you can use.

const boxShadow = {
  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
  DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
  xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
  "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
  inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
  none: "0 0 rgb(0, 0 / 0, 0)",
};

You can customize the default box shadow values for AstroLaunch UI very easy and straightforward, it's the same as customizing box shadow values for tailwindcss.

You just need to customize the box shadow value that you like through the boxShadow object for tailwind.config.js file.

module.exports = withMT({
  theme: {
    boxShadow: {
      sm: "0 2px 4px 0 rgb(0 0 0 / 0.05)",
      // rest of the box shadow values
    },
  },
});

You can add new box shadow value for AstroLaunch UI very easy and straightforward, it's the same as adding new box shadow value for tailwindcss.

You just need to add your own box shadow value to the extend and boxShadow object for tailwind.config.js file.

module.exports = withMT({
  theme: {
    extend: {
      boxShadow: {
        "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
      },
    },
  },
});

If you want to see more examples and properties please check the official Material Tailwind Documentation.