Box Shadow
Use shadow prop to control the box shadow of an element.
Name | Value |
|---|---|
xs | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
sm | 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) |
md | 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) |
lg | 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) |
xl | 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) |
inner | inset 0 0 6px 0 rgb(0 0 0 / 0.1); |
none | 0 0 #0000 |
#
Documentation
#
#
Usage
#
shadow=sm
shadow=md
shadow=lg
shadow=xl
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box shadow="sm">shadow=sm</Box>
<Box shadow="md">shadow=md</Box>
<Box shadow="lg">shadow=lg</Box>
<Box shadow="xl">shadow=xl</Box>
</Canvas>
);
}#
Inner shadow
#
shadow=inner
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box shadow="inner">shadow=inner</Box>
</Canvas>
);
}#
Removing the shadow
#
shadow=none
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box shadow="none">shadow=none</Box>
</Canvas>
);
}