Materials.
A finish with a purpose.
Static finishes bring tactile character to controls and surfaces, with optional styles and explicit effects reduction.
Finish without a rendering engine
Static CSS creates matte, enamel, clay, brushed metal and paper finishes. No texture downloads, render loop, backdrop sampling, or additional rendering dependency is needed. Solid and soft controls accept finishes; outline and ghost keep their original emphasis.
Made to be used.
A finish adds character. The action keeps its meaning.
Ready when you are.
import "@dixy-ui/react/styles.css";
import { Theme } from "@dixy-ui/react";
import { useState } from "react";
import {
Box,
Button,
Dialog,
Heading,
IconButton,
Inline,
Stack,
Text,
Theme as MaterialScope,
} from "@dixy-ui/react";
import type { Material, ShapePreset, EffectsPreference } from "@dixy-ui/tokens";Recipe contracts
| Material | Finish | Texture | Depth |
|---|---|---|---|
matte | diffuse | none | none |
glossy | glossy | none | raised |
soft | soft | none | raised |
metal | brushed | lines | raised |
paper | diffuse | fibers | none |
Keep content readable
Decorations live in the background. Text keeps its semantic foreground; focus, loading, disabled, hover and pressed states keep their contracts. The paper and metal textures are CSS approximations. Reduced effects, increased contrast, reduced transparency and forced colors remove decorative layers. Materials are an optional stylesheet.
Compare rendering modes
Use the same scene with a flat surface, static finish, or experimental frosted toolbar. The pilot loads only when selected. Its 8px blur is capped to one small region; labels keep opaque backings.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
The same content, geometry, and scroll path in each sample.
No sample is running. Glass remains experimental.
Sampling uses requestAnimationFrame only during the explicit six-second run and stops on unmount, Stop, or reduced motion. Frame intervals include all browser work; they do not isolate paint, GPU, energy, or thermal cost. Background tabs can distort results. Mobile CPU emulation cannot establish real-device GPU performance.
Surface API
Button and Box inherit their finish and geometry from Theme. Box forwards native semantics, refs, events and styles. Import the optional material stylesheet once in the application that uses it.
| Contract | Property | Type |
|---|---|---|
Button | material | "matte" | "glossy" | "soft" | "metal" | "paper" | undefined |
Button | shape | "rounded" | "pill" | "square" | undefined |
Button | size | "sm" | "md" | "lg" | undefined |
Button | variant | "soft" | "solid" | "outline" | "ghost" | undefined |
Button | color | "neutral" | "accent" | "danger" | "success" | undefined |
Button | loading | boolean | undefined |
Box | material | "matte" | "glossy" | "soft" | "metal" | "paper" | undefined |
Box | shape | "rounded" | "pill" | "square" | undefined |