Shadow
We use a single, consistent shadow to add depth without distraction. Designed to be subtle yet effective across light and dark surfaces. Designed to be subtle yet effective across light and dark surfaces.
- Default shadow: 0px x, 15px y, 44px blur, 0px spread
- Color: #000000 at 10% opacity
React
A set of shadow presets are available to be applied to any system component via
the shadow or boxShadow style prop.
Shadow
Standard shadows are used to create the appearance of depth or layers.
Inset
Inset shadows are the inverse of distance, for creating an inlay effect.
Halo
Border effects applied via CSS box-shadow prevent affecting the dimensions of
a container. This method is typically used to indicate focus or selection.
Ring
Ring is similar to Halo above, but thinner.
Deprecated
These distance values are deprecated in favor of a singular default style.
They will be removed in a future version.
React Native
To achieve drop shadow effect in React Native you can leverage the Shadow
component, which builds on top of Stack and leverages the
boxShadow property
available in React Native 19 through the New Architecture.
import { Body, Shadow } from '@hoverinc/design-system-react-native';const App = () => ( <Shadow alignItems="center" borderRadius="$large" justifyContent="center" padding="$1000" > <Body>Faculdade de Churrasco</Body> </Shadow>);