Material Swatches

Version

v1.0.0

A material swatch collection for solid colours, gradients, textures and interactive surface treatments. Configure named samples with colour values, texture media, custom HTML and CSS.

Layout Blocks
Payload CMSNext.js
Switch to fullscreen to interact with component.
...Loading

Version

v1.0.0

Updated

Sep 15, 2026

License

Single Site

Framework

Next.js

Install via Pro CLI

Requires an active Pro subscription and license API authentication. The browser preview does not expose the sellable source files.

Sign in to access CLI

Documentation

What it includes

Eight material examples: Cloud, Iridescent, Aurora layers, Shimmer hover, Woven texture, Brushed metal, Glassy menu hover and Double-border squircle.

Configure each swatch

Give each sample a name and configure its colour value, texture, material HTML and material CSS. The block also includes root element, class, content, attribute and layer fields.

Surface examples

Explore solid colours, layered gradients, a woven texture, brushed metal, shimmer and glass hover treatments, and a double-border squircle.

Explore More Products

Back to Blocks