Skip to Content
✨ WP Bones v2.0.1 is out! Check the Release Notes →
DocumentationBoilerplatesReactJS (WP libraries)

ReactJS Boilerplate (WordPress libraries only)

React built with only the @wordpress/* libraries WordPress already ships at runtime — no Mantine, no third-party UI kit. The result feels native in wp-admin and keeps your bundle tiny.

Runtime dependencies

{ "dependencies": { "@wordpress/components": "^32", "@wordpress/data": "^10", "@wordpress/hooks": "^4" } }

react, react-dom, @wordpress/element, @wordpress/i18n are provided by WordPress at runtime (webpack externalises them via @wordpress/scripts’ default config).

What the demo shows

apps/app.tsx renders:

  • A Notice with a greeting string that’s passed through applyFilters('wpkirk.greeting', …) — other plugins can override it via @wordpress/hooks.
  • A Counter card with Button components and a useCounter custom hook.
  • A controlled TextControl with a live Hello, {name} output.

apps/use-counter.ts is the tiny reusable hook, covered by 5 Jest tests that exercise it through @testing-library/react’s renderHook + act.

Highlights

  • Native wp-admin lookCard, Button, TextControl, Notice, Flex from @wordpress/components match the surrounding admin UI.
  • React 18 createRoot from @wordpress/element.
  • i18n through @wordpress/i18n with __ and sprintf.
  • Extensibility via @wordpress/hooks filters — other plugins can hook into your UI strings.
  • Testing via @testing-library/react + Jest.

Use this when

You want to build a Gutenberg-friendly plugin, integrate with WordPress data stores, or stay on the WordPress-provided React runtime without adding a third-party UI library. This is the sweet spot for plugins that live in wp-admin and want to look native.

Last updated on