Shadows

Semantic Tokens

Chakra UI supports these semantic tokens out of the box.

Here’s an example of how to add new shadows.

export const system = createSystem(defaultConfig, {
    theme: {
        semanticTokens: {
            shadows: {
                custom: {
                    value: {
                        _light: "0 32px 56px 0 rgba(0, 0, 0, 0.25)",
                        _dark: "0 32px 56px 0 rgba(0, 0, 0, 0.25)",
                    },
                },
            },
        },
    },
});