Mask

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Mask — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class mask, with 15 modifiers:

• .mask
• .mask-circle
• .mask-decagon
• .mask-diamond
• .mask-heart
• .mask-hexagon
• .mask-hexagon-2
• .mask-parallelogram
• .mask-pentagon
• .mask-squircle
• .mask-star
• .mask-star-2
• .mask-triangle
• .mask-triangle-2
• .mask-triangle-3
• .mask-triangle-4

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Mask } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import { Mask } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

const PHOTO = `data:image/svg+xml,${encodeURIComponent(
    `<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>` +
        `<defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>` +
        `<stop offset='0' stop-color='#6366f1'/><stop offset='1' stop-color='#ec4899'/>` +
        `</linearGradient></defs>` +
        `<rect width='100' height='100' fill='url(#g)'/>` +
        `<circle cx='50' cy='40' r='18' fill='rgba(255,255,255,.92)'/>` +
        `<rect x='22' y='62' width='56' height='38' rx='19' fill='rgba(255,255,255,.92)'/>` +
        `</svg>`,
)}`;

const SHAPES = [
    "squircle",
    "circle",
    "heart",
    "hexagon",
    "hexagon-2",
    "pentagon",
    "diamond",
    "triangle",
    "star",
    "star-2",
    "decagon",
    "parallelogram",
] as const;

export function MaskDemo() {
    return (
        <Section title="Real use · avatar photo clipped to every shape">
            <Row>
                {SHAPES.map((shape) => (
                    <Mask key={shape} variant={shape} className="h-16 w-16">
                        <img src={PHOTO} alt="" className="h-full w-full object-cover" />
                    </Mask>
                ))}
            </Row>
        </Section>
    );
}

Vanilla — node tree to HTML

Mask — lowers to <div>, holding its children. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Mask", "mask", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "mask mask-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

nothing — this one is static markup