Box shadow

Understand how to use the boxShadow property to modify the component's box shadow

Modify box shadow

You can modify the current box shadow by changing the boxShadow property.

module.exports = {
    ...,
    content: [
        "./node_modules/@andore-ui/**/*.{js,ts,jsx,tsx}",
    ],
    plugins: [
        require('@andore-ui/theme')({
            theme: {
                boxShadow: {
                    sm: " 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)",
                    DEFAULT: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)",
                }
            }
        }),
    ],
};

How does it work?

The theme system uses the boxShadow property to define the box shadow of the components. All components depend on this property to define the box shadow, if we change the value of this property, all components will be affected.

For example, let's modify the box shadow of this component:

Box shadow tokens

The following table lists all the box shadow tokens available in the theme system.