Public CSS API

WireKit's component Blade templates emit a curated set of wk-* CSS class names alongside the Tailwind utility classes that drive most of the styling. These wk-* classes are part of the public API surface — developers depend on them to compose custom CSS, defend against typography-wrapper carve-outs, drive animation cascades, or layer their own design-system on top. This page is the canonical catalog of every public wk-* class, the component that emits it, the contract it satisfies, and how to customize it.

#What's public, what's internal

Public (this page). Every class name starting with wk- that appears in shipped dist/wirekit.css. These are deliberate emissions. Anti-drift enforcement guarantees every class in dist/wirekit.css has a row in the table below, AND every row references a class that actually ships.

Internal (NOT in this catalog). Tailwind utility classes (flex, grid, px-[var(...)] etc.) emitted into Blade templates via WireKit::resolveClasses(). Those are styling implementation details — they may change between minor versions without notice. Use the wk-* classes below as your stable contract.

Tokens (separate surface). CSS custom properties (--color-wk-*, --font-wk-*, --space-wk-*, etc.) are the themeable value surface — developers override values via :root {} declarations. The catalog below covers class names; the token surface is documented in Theming and Design Token Reference.

#Stability tiers

Each row carries one of three stability markers:

#Class catalog

#Layout / chrome markers

#Reading family

#Responsive utilities

Breakpoint-scoped helpers for app-shell layouts where a fixed-width sidebar or two-pane split must collapse on narrow viewports. Both flip at the md (48rem) breakpoint, in lockstep with the reading-spine hideBelow="md" default.

#Color-mode utilities

Visibility helpers for swapping an asset (logo, illustration, screenshot) between light and dark mode without the Tailwind dark: variant — WireKit components never use dark:. Scoped to the .dark class, so they follow the same toggle as every WireKit token.

#Animation / motion

#Display / loading

#BEM sub-class enumeration

For drift-audit completeness, the reading-family BEM sub-classes are enumerated here as explicit literals. Each falls under the parent class's row above and follows the same Stable tier + customization contract.

wk-reading-bookmark__dismiss, wk-reading-bookmark__label, wk-reading-bookmark__resume, wk-reading-meta__remaining, wk-reading-meta__separator, wk-reading-meta__total, wk-reading-minimap__anchor, wk-reading-minimap__anchors, wk-reading-minimap__bookmark-marker, wk-reading-minimap__preview, wk-reading-minimap__rendered, wk-reading-minimap__rendered-canvas, wk-reading-minimap__stripe, wk-reading-minimap__stripe--active, wk-reading-minimap__stripes, wk-reading-minimap__tooltip, wk-reading-minimap__viewport, wk-reading-progress--dot, wk-reading-progress__fill, wk-reading-spine__back-to-top, wk-reading-spine__filter, wk-reading-spine__item, wk-reading-spine__label, wk-reading-spine__link, wk-reading-spine__number, wk-reading-spine__tick.

#AI tooling / LLM consumption

The entire catalog above is also emitted as machine-readable JSON via the css-classes group of wirekit:export-api-map:

# List every public CSS class as JSON for AI tooling consumption.
php artisan wirekit:export-api-map --pretty | jq '.groups[] | select(.id == "css-classes")'

The output shape per class:

{
    "id": "wk-stagger",
    "tier": "Stable",
    "docs_url": "https://docs.wirekit.app/extending/public-css-api#animation--motion"
}

The tier value mirrors the Stability tiers section above — wk-animate-* state classes carry Internal-with-exception; every other class is Stable. The docs_url anchors to the catalog sub-section (Layout / Reading family / Animation / Display) the class lives under, NOT to the emitter component's page, so AI tooling can route to the canonical contract in one hop.

Cursor / Claude Code / MCP-server developers wire this group as a discovery surface for wk-* autocomplete — pair with wirekit:list --as=json and wirekit:show {name} --as=json for full component + class coverage in one toolchain.

#Lockstep guarantee

The catalog is anti-drift enforced in both directions:

1. Every wk-* class WireKit emits (compiled CSS OR Blade templates) has a row in the catalog above. Adding a new wk-{name} to a Blade emission without updating this page fails the upstream build.
2. Every catalog row references a class that actually ships in dist/wirekit.css. Removing a class without removing its row fails the upstream build.

Combined, the two directions make the catalog the single source of truth for the public CSS API surface — drift between this page and the shipped CSS is impossible.

#See Also

• Content-Edge Spine — the per-component inline-padding contract.
• Theming — CSS variable / token surface (the OTHER half of the public CSS API).
• Animations — full wk-animate-* preset catalog.
• CLI Reference — wirekit:export-api-map — the AI-tooling export this catalog feeds.