Skip to main content
The @wordpress/components package provides a library of generic WordPress components for creating common UI elements shared between screens and features of the WordPress dashboard.

​
Installation

Install the package using npm: 
npm install @wordpress/components --save
This package assumes that your code will run in an ES2015+ environment. If you’re using an environment with limited support for such language features, include the polyfill shipped in @wordpress/babel-preset-default.

​
Basic Usage

You can import components from the package root: 
import { Button } from '@wordpress/components';

export default function MyButton() {
	return <Button>Click Me!</Button>;
}

​
Styling Components

Many components include CSS to add styles. You need to load these styles for components to appear correctly.

​
In WordPress

Add the wp-components stylesheet as a dependency of your plugin’s stylesheet: 
wp_enqueue_style(
	'my-plugin-styles',
	'path/to/my-styles.css',
	[ 'wp-components' ]
);

​
Outside WordPress

Link directly to the built stylesheet: 
<link rel="stylesheet" href="node_modules/@wordpress/components/build-style/style.css" />

​
TypeScript Support

This package exports types for the components it provides. Extract props types using React.ComponentProps: 
import type { ComponentProps } from 'react';
import { Button } from '@wordpress/components';

export default function MyButton( props: ComponentProps< typeof Button > ) {
	return <Button { ...props }>Click Me!</Button>;
}

​
Working with Popovers

By default, the Popover component renders within an extra element appended to the document body. You can control where popovers render using Popover.Slot: 
import { Popover, SlotFillProvider } from '@wordpress/components';
import { MyComponentWithPopover } from './my-component';

const Example = () => {
	return (
		<SlotFillProvider>
			<MyComponentWithPopover />
			<Popover.Slot />
		</SlotFillProvider>
	);
};

​
Key Components

Button

Clickable buttons for triggering actions

TextControl

Standard text input fields

SelectControl

Dropdown select menus

CheckboxControl

Checkbox inputs with labels

Panel

Collapsible panels for organizing content

Modal

Dialog modals for focused interactions

​
Form Components

If you’re building a form to edit items in a dataset (rather than simply submitting data), consider using DataForm from the @wordpress/dataviews package.For adding validation, use the Validated Form Components.

​
Component Status

This package is currently transitioning components to the new @wordpress/ui package. Some components may be deprecated or removed in the future.Check the component status documentation in each Storybook file for up-to-date usage guidance. The status given in Storybook should be considered the most accurate signal, above the experimental tag or component prefix.

​
Documentation & Examples

Browse the complete component library with interactive examples: View Storybook Documentation →

​
Peer Dependencies

This package requires React as a peer dependency: 
{
	"peerDependencies": {
		"react": "^18.0.0",
		"react-dom": "^18.0.0"
	}
}
Make sure you have React 18.0.0 or higher installed in your project.

Build docs developers (and LLMs) love

Get started for freeTalk to us