getShadowClass()function
getShadowClass({ shadow }: ShadowVariants): string | undefined| Param | Type | |
|---|---|---|
options | ShadowVariants | Variant props for the drop shadow of an element, e.g. shadow="large". required |
.shadow | ShadowVariant | Drop shadow of the element. |
| Return | |
|---|---|
string | undefined | The shadow class string, or undefined when no shadow is set. |
Get the drop-shadow class for a component from its shadow variant prop.
This module's main job is to define and document the elevation drop-shadow design tokens. Components read these tokens directly; getShadowClass({ shadow }) exists as a utility (e.g. shadow="large" → shadow-large) and as the home for this documentation.
Theme variables
The following :root variables are defined by this module and can be overridden in a theme file to adjust default styling across the whole app. Each step deepens both blur and offset for a consistent elevation ramp.
| Variable | Default |
|---|---|
--shadow-small | 0 0.375rem 1.5rem -0.75rem #0006 |
--shadow-normal | 0 0.5rem 2rem -1rem #0006 |
--shadow-large | 0 0.75rem 3rem -1.5rem #0006 |
The shadow= variant prop accepts "none", "small", "normal", or "large" — "none" removes a component's default shadow rather than mapping to a token.
Examples
getShadowClass({ shadow: "large" }) // "shadow-large"