Material Layer

Material Layers are absolutely-positioned div blocks that can be dropped into any relatively-positioned element to give it material. They consist of 3 layers: backdrop filter (the actual material layer), tint, and lighting.

Example Instance

<MaterialLayer 
  type="glass" 
  materialProps={{
    thickness: "normal",
    tint: "primary",
    tintOpacity: 0.4,
    light?: true,
    lightExpression: "linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.18) 100%)"
  }}
/>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add material-layer` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
materialProps	no	LkMatProps	Optional material-specific properties	undefined
type	no	LkMaterialType	The type of material to apply to the layer	undefined
zIndex	no	number	Optional z-index for the material layer	undefined

Common

Props with globally-defined behavior that are used in multiple components.