Mockup

The Mockup components — frames for showcasing UI and code in docs and marketing pages. Colorless (the code frame paints itself with the neutral surface).

Browser frame

Your page renders here

Window frame

App content

Neutral dots

Colorless traffic lights

Code block

pnpm add @wizeworks/silicaui

Done in 1.2s

Phone frame

9:41Your app screen

Using Mockup

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.

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

Root class mockup-browser, with 7 modifiers:

.mockup-browser
.mockup-browser-input
.mockup-browser-toolbar
.mockup-code
.mockup-phone
.mockup-phone-display
.mockup-plain
.mockup-window

The full API for Mockup, on every path, is available through the Silica MCP server.