Customizing Box Shadow - Horizon UI

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

Default Box Shadow

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

const boxShadow = {
  "3xl": "14px 17px 40px 4px",
  inset: "inset 0px 18px 22px",
  darkinset: "0px 4px 4px inset",
};

Customizing The Default Box Shadow

You can customize the default box shadow values for Horizon 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 = {
  theme: {
    boxShadow: {
      sm: "0 2px 4px 0 rgb(0 0 0 / 0.05)",
      // rest of the box shadow values
    },
  },
};

Adding New Box Shadow

You can add new box shadow value for Horizon 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 = {
  theme: {
    extend: {
      boxShadow: {
        "3xl": "0 35px 60px -15px rgba(0, 0, 0, 0.3)",
      },
    },
  },
};

For more information about tailwindcss box shadow customization, please check the TailwindCSS Documentation