@wirecore/wirelayer-css

The WireLayer components as plain CSS classes (.wc-*) for HTML and server templates (Blade, Twig, Astro …) – generated from the same recipes as the Vue and React components, for everything that works without JavaScript.

Storybook · GitHub · Changelog

Installation

With npm, pnpm, Yarn or Bun:

npm install @wirecore/wirelayer-css
pnpm add @wirecore/wirelayer-css
yarn add @wirecore/wirelayer-css
bun add @wirecore/wirelayer-css

Usage

Self-contained, without a build step – ship dist/wirecore.css and dist/fonts/ side by side:

<link rel="stylesheet" href="/assets/wirecore/wirecore.css" /> <button class="wc-button">Save</button>

With your own Tailwind build:

@import 'tailwindcss';
@import '@wirecore/wirelayer-tokens/theme.css';
@import '@wirecore/wirelayer-tokens/fonts.css';
@import '@wirecore/wirelayer-css/components.css';

Inside a page with CSS of its own (WordPress admin, a host app) – the chosen components, scoped to one element, without @layer, no build tools needed:

npx wirelayer-css embed --scope '#my-app' --components button,input,card --out assets/wirelayer

Details in the HTML guide (Storybook › HTML › Getting started, or llms-full.txt).

The bundled fonts are licensed under the SIL Open Font License 1.1 (dist/fonts/OFL.txt), see THIRD_PARTY_NOTICES.md.

AI assistants

llms.txt (overview) and llms-full.txt (the class reference: every component with its parts and modifiers and the guides) ship with the package – point your assistant at node_modules/@wirecore/wirelayer-css/llms.txt, e.g. in your CLAUDE.md or AGENTS.md. Or the MCP server @wirecore/wirelayer-mcp: claude mcp add wirelayer -- npx -y -p @wirecore/wirelayer-mcp wirelayer-mcp.

Part of WireLayer – one look and one API for Vue, React, React Native and HTML, accessible according to WCAG 2.2 AA.

License

MIT – Copyright (c) 2026 WireCore GmbH