Release ready
A primary shadow separates related content from the page.
STYLES
Shadow
Add the same soft exterior shadow on web, Android, and iOS, then tint it with the semantic colors from your theme.
PLAYGROUND
Choose a shadow
Use shadow for a progressive soft blur and shadowColor for a theme-aware tint. The generated snippet follows both selections.
Card shadow:"" shadowColor:"" p:6 rounded:"md"
Text "Theme-aware shadow"COMPONENT EXAMPLES
One style contract
Card, Button, Avatar, Chip, and Input use the same portable shadow scale and semantic color families.
CARD
Release ready
A primary shadow separates related content from the page.
BUTTON
AVATAR
CHIP
ValidatedINPUT
SIZE SCALE
Five shadow levels
xs
sm
md
lg
xl
SEMANTIC COLORS
Eight theme families
API
Props
Declare shadow without shadowColor for the neutral target default, or combine both props for a semantic tint.
Prop | Type | Default |
|---|---|---|
No dataThere are no records to display | ||