Drop-in components for WordPress plugin admin pages. Real WP class names, no invented prefix, no framework. Just paste and ship.
Settings saved. Your changes have been applied.
| API Key | |
|---|---|
| Notifications |
Built for WordPress
Three architectural choices that make WP AdminCSS different from every other WordPress component library.
No wpac- or wpa- prefix to learn. .button-primary, .notice-success, .wp-list-table — the same classes WordPress core uses, so your plugin pages fit in seamlessly.
50+ CSS custom properties respond to WordPress's nine native color schemes — Default, Blue, Coffee, Ectoplasm, Midnight, Ocean, Sunrise, Light, Modern. Inherit user preference automatically.
Every component ships with a copy-paste AI prompt. Hand the HTML and context to Claude, GPT, Cursor, or Aider — and they'll generate plugin pages that fit the WP admin aesthetic.
Component library
Every primitive you need for a polished plugin admin page. Click any tile to see the live preview and copy the code.
Built for AI workflows
Every component has two copy buttons. Grab the raw HTML for yourself, or grab a ready-to-paste prompt for your coding agent.
<div class="notice notice-success is-dismissible">
<p><strong>Settings saved.</strong></p>
<button type="button" class="notice-dismiss">
<span class="screen-reader-text">Dismiss</span>
</button>
</div>Add a dismissible WordPress admin notice to my
plugin page using WP AdminCSS.
Import the library:
<link rel="stylesheet" href="https://wp-
admincss.com/dist/wp-admin.css">
HTML:
<div class="notice notice-success
is-dismissible">
<p><strong>Saved.</strong></p>
<button class="notice-dismiss">…
</div>Customize
Every primitive uses CSS custom properties. Override them in your plugin's stylesheet to fit your brand. No build step, no preprocessor, no fork.
/* your-plugin/admin.css */
:root {
--wpadmin-primary: #7c3aed;
--wpadmin-primary-dark: #6d28d9;
--wpadmin-radius: 8px;
--wpadmin-text: #1a1a2e;
}
/* Scope to just your plugin page if you want */
.my-plugin-page {
--wpadmin-primary: #0d9488;
}
<div class="my-plugin-page">
<!-- everything inside picks up your tokens -->
</div>
Get started
<link rel="stylesheet" href="https://cdn.wp-admincss.com/css/latest.css">
<div class="wrap">
<h1>My Plugin</h1>
<button class="button button-primary">Save</button>
</div>
Built for AI-driven development
Point your coding agent at one URL. It gets the framework instructions, the security patterns, the database conventions, and a working WP plugin to copy from — all in one shot.
The master entry point. The framework, the anti-patterns, the security checklist. Hosted at cdn.wp-admincss.com/AGENTS.md — load it once, the agent has everything.
Security, database, data-modeling, enqueue, plugin-structure, i18n. Each focuses on the patterns AI agents commonly get wrong in WordPress. Load on demand.
A working plugin scaffold — settings page, REST endpoint, custom table, lifecycle hooks. Clone, find-replace the names, ship.
# Tell your agent to use the framework
@docs https://cdn.wp-admincss.com/AGENTS.md
# Or read into the conversation directly
curl https://cdn.wp-admincss.com/AGENTS.md
curl https://cdn.wp-admincss.com/skills/security.md
# Then ask: "Build a WP plugin settings page following WP AdminCSS"
# The agent already knows the security boundary, the markup, the conventions.
gh repo clone artificialpoets/wp-admincss
cp -r wp-admincss/boilerplate ~/my-plugin
cd ~/my-plugin && composer install
Three packages, one model
Pick the runtime that fits your plugin. Every package emits identical WP-native HTML, inherits the user's color scheme, and exposes the same component set.
Tokens + WP admin CSS bundle. Drop the stylesheet into any plugin page — no JS, no build step.
Typed components rendering real WP class names. <Button variant="primary">.
Composer package with render helpers. Components::button('Save', ['variant' => 'primary']).
Browse the component library, copy what you need, and ship a polished plugin page in minutes.
Browse components