Usage
Paper component renders white (or theme.colors.dark[7]
for dark theme)
background with shadow, border-radius and padding from theme.
Paper is the most basic ui component
Use it to create cards, dropdowns, modals and other components that require background with shadow
Shadow
xs
sm
md
lg
xl
Radius
xs
sm
md
lg
xl
Padding
xs
sm
md
lg
xl
Polymorphic component
Paper is a polymorphic component, you can change root element:
Get ref
Paper component props
Name | Type | Description |
---|---|---|
children | ReactNode | Paper children |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Predefined border-radius value from theme.radius or number for border-radius in px |
shadow | MantineShadow | Predefined box-shadow from theme.shadows (xs, sm, md, lg, xl) or any valid css box-shadow property |
withBorder | boolean | Adds 1px border with theme.colors.gray[3] color in light color scheme and theme.colors.dark[4] in dark color scheme |