Documentation

Install, customize, and ship.

WP AdminCSS works in three runtimes — drop-in CSS, npm package, or PHP Composer package — all emitting the same native WordPress admin markup. Pick whichever fits your stack.

Install

CDN (fastest)

Add a single <link> tag in your plugin's admin enqueue. Works inside WordPress without any build step.

<link rel="stylesheet" href="https://cdn.wp-admincss.com/css/latest.css">

For production, pin to a version:

<link rel="stylesheet" href="https://cdn.wp-admincss.com/css/v0.1.0/wp-admin.css">

npm (React / Vite / build pipelines)

npm install @wp-admincss/core-css @wp-admincss/tokens

// In your entry CSS or JS:
import '@wp-admincss/tokens';
import '@wp-admincss/core-css';

React components live in a separate package:

npm install @wp-admincss/react

Composer (PHP plugins)

composer require wp-admincss/composer

<?php
use WPAdminCSS\Assets;

add_action('admin_enqueue_scripts', [Assets::class, 'enqueue_cdn']);

Your first component

Once the CSS is loaded, real WordPress admin class names just work. Here's a complete admin page with a heading, a success notice, and a primary button:

<div class="wrap">
  <h1 class="wp-heading-inline">My Plugin</h1>
  <a href="?page=add-new" class="page-title-action">Add New</a>
  <hr class="wp-header-end">

  <div class="notice notice-success is-dismissible">
    <p><strong>Settings saved.</strong></p>
  </div>

  <p class="submit">
    <button class="button button-primary">Save Changes</button>
  </p>
</div>

That's the whole API. Browse the full component catalog for every primitive (forms, list tables, modals, postboxes, status badges, …) with copy buttons for HTML, AI prompts, React, and PHP.

Start a new plugin from the boilerplate

The fastest way to a working plugin is to clone the boilerplate, which already wires up the patterns that AI agents and developers commonly get wrong.

gh repo clone artificialpoets/wp-admincss
cp -r wp-admincss/boilerplate ~/my-plugin
cd ~/my-plugin
composer install

Then rename the WPACS\ namespace to your plugin's, set your text domain, activate the plugin. The scaffold includes:

Secure settings page (capability check + nonce + sanitize/escape)
Custom database table with dbDelta migration and a typed repository
REST endpoint with permission_callback and schema validation
Lifecycle hooks (activation / deactivation / uninstall)
PSR-4 autoloading, i18n setup, scoped asset enqueue

Full file-by-file walkthrough below in Boilerplate walkthrough.

Why real WordPress class names

Most "WordPress admin component libraries" invent their own class prefix — .wpac-button--primary, .acme-notice, that sort of thing. The output looks like WP, but doesn't behave like WP and doesn't fit cleanly alongside core admin pages.

WP AdminCSS uses the actual WordPress admin class names: .button, .notice, .wp-list-table, .postbox, .form-table, and so on. The benefits compound:

Your plugin inherits the user's color scheme automatically. The same way WP core admin does.
WordPress-savvy developers can read your markup without having to learn a new namespace.
Your admin pages look indistinguishable from core WP pages. Less context-switching for the user.

Color schemes

WordPress ships with nine admin color schemes: Default, Blue, Coffee, Ectoplasm, Midnight, Ocean, Sunrise, Light, Modern. WP AdminCSS responds to all of them via the admin-color-* body class WP applies based on the user's profile.

<body class="admin-color-midnight">
  <!-- All tokens use Midnight scheme values -->
</body>

Inside a WordPress plugin you don't need to do anything — WP sets the body class for you. For previews or design demos, set it yourself; you can also apply it to any ancestor (not just <body>) to isolate the theming to one region.

Design tokens

Everything routes through CSS custom properties. Full list lives in packages/tokens/src/tokens.css. The most-used ones:

Token	Use
`--wpadmin-primary`	Primary accent (matches the user's WP color scheme)
`--wpadmin-primary-dark`	Hover/active state
`--wpadmin-text`	Body text
`--wpadmin-text-subtle`	Secondary text, captions, metadata
`--wpadmin-surface`	Card / panel background
`--wpadmin-surface-alt`	Page background
`--wpadmin-border`	Borders + dividers
`--wpadmin-radius`	Corner radius
`--wpadmin-font`	System font stack
`--wpadmin-font-mono`	Monospace font stack

Customize for your brand

Override tokens to skin your plugin while keeping the WP feel. Scope to a wrapper class so the rest of WP admin stays consistent:

.my-plugin-page {
  --wpadmin-primary: #7c3aed;
  --wpadmin-primary-dark: #6d28d9;
  --wpadmin-radius: 8px;
}

Three brand previews on the landing page demonstrate the pattern — see the customize section on the home page.

Pro tip

Scope your overrides to your plugin's wrapper element so the rest of WP admin keeps the user's chosen color scheme. WP power users get upset when plugins break their theming.

Building with AI agents

The framework is designed to be agent-readable. The complete instruction surface lives at the repo root, hosted publicly so any agent can fetch it.

AGENTS.md — master entry point. Hosted at cdn.wp-admincss.com/AGENTS.md.
skills/ — focused skill files for the patterns AI commonly gets wrong (security, database, i18n, etc.).
boilerplate/ — a complete working plugin scaffold to clone for new plugins.

The agent recipe

Point your coding agent at WP AdminCSS using a prompt like this:

Read https://cdn.wp-admincss.com/AGENTS.md first.

For any state-changing action, load:
  https://cdn.wp-admincss.com/skills/security.md

For database work, load:
  https://cdn.wp-admincss.com/skills/database.md

For data modeling decisions:
  https://cdn.wp-admincss.com/skills/data-modeling.md

When building a plugin admin page:
  1. Identify the layout from https://wp-admincss.com/layouts.html
  2. Identify the components from https://wp-admincss.com/components.html
  3. Copy the "AI Prompt" tab from each into your implementation

Most agents (Claude Code, Cursor, Cline, Aider) can fetch these URLs directly. If yours can't, paste the relevant content into the conversation.

Skills reference

Each skill is a focused Markdown file that an agent can fetch on demand when it needs that specific expertise. Load only the skills relevant to the current task — keeping context lean keeps results good.

Skill	When to load
security.md	Any state-changing action — capability checks, nonces, sanitize/escape, SQL injection prevention.
database.md	`$wpdb` queries, prepared statements, `dbDelta` migrations, transactions.
data-modeling.md	Decision tree: options vs post-meta vs user-meta vs custom tables vs transients vs CPTs.
enqueue.md	The four enqueue hooks, WP built-in script handles, scoping admin assets to your hook suffix.
plugin-structure.md	PSR-4 layout, lifecycle hooks, naming conventions, file organization.
i18n.md	Translation functions, text domains, RTL support, JS string translation.
publishing.md	Plugin Check, slug research on wordpress.org, `readme.txt` format, SVN submission flow.

Boilerplate walkthrough

The scaffold is a complete working plugin. Every file is a worked example of the patterns described in the skills directory — read them before you write similar code from scratch.

boilerplate/
├── wp-admincss-starter.php  ← Plugin bootstrap (rename per project)
├── composer.json            ← PSR-4 autoloading
├── uninstall.php            ← Multisite-aware cleanup
├── src/
│   ├── Plugin.php           ← Orchestrator — wire up hooks here
│   ├── Lifecycle.php        ← Activation, deactivation hooks
│   ├── Admin/
│   │   ├── Menu.php         ← register_menu()
│   │   ├── Assets.php       ← Enqueue WP AdminCSS from the CDN
│   │   └── SettingsPage.php ← Capability + nonce + sanitize/escape demo
│   ├── Database/
│   │   ├── Schema.php       ← dbDelta migrations
│   │   └── EventRepository.php  ← $wpdb with prepare()
│   └── REST/
│       └── SettingsController.php ← REST with permission_callback

Key files to study:

Admin/SettingsPage.php — the canonical secure admin page. Capability check before doing anything, nonce on the form, sanitize on input, escape on output. Copy this pattern verbatim for any settings page.
Database/EventRepository.php — every $wpdb call uses ->prepare(). The class methods are typed so callers can't accidentally pass user input as a column name.
REST/SettingsController.php — REST endpoint with both permission_callback (capability check) and JSON Schema validation on arguments.
uninstall.php — runs on plugin uninstall. Drops the custom table, deletes options, scoped to be multisite-aware (loops sites if network-active).

CDN endpoints

Everything in the framework is hosted on cdn.wp-admincss.com so agents and runtime plugins can fetch what they need without cloning the repo.

URL	Content
`cdn.wp-admincss.com/css/latest.css`	Rolling latest CSS bundle
`cdn.wp-admincss.com/css/v0.1.0/wp-admin.css`	Pinned version (production use)
`cdn.wp-admincss.com/AGENTS.md`	Master agent instructions
`cdn.wp-admincss.com/skills/name.md`	Individual skill files

In production

Pin to a version. The latest.css rolling endpoint is useful for prototyping but exposes you to breaking changes on framework updates.