@wordpress/components

Component Reference

This packages includes a library of generic WordPress components to be used for creating common UI elements shared between screens and features of the WordPress dashboard.

Installation

Install the module

npm install @wordpress/components --save

This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods. Learn more about it in Babel docs.

Usage

Within Gutenberg, these components can be accessed by importing from the components root directory:

/**
 * WordPress dependencies
 */
import { Button } from '@wordpress/components';

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

Many components include CSS to add style, you will need to add in order to appear correctly. Within WordPress, add the wp-components stylesheet as a dependency of your plugin's stylesheet. See wp_enqueue_style documentation for how to specify dependencies.

In non-WordPress projects, link to the build-style/style.css file directly, it is located at node_modules/@wordpress/components/build-style/style.css.

Similar packages

Other packages similar to @wordpress/components

react-bootstrap

React-Bootstrap is a popular library that provides Bootstrap components as React components. It offers a wide range of UI components similar to @wordpress/components but follows the Bootstrap design language.

material-ui

Material-UI is a comprehensive library of React components that implement Google's Material Design. It offers a wide range of UI components and utilities, similar to @wordpress/components, but follows the Material Design guidelines.

antd

Ant Design (antd) is a React UI library that provides a set of high-quality components and design guidelines. It offers a wide range of components similar to @wordpress/components but follows the Ant Design specifications.

semantic-ui-react

Semantic UI React is the official React integration for Semantic UI. It provides a wide range of UI components similar to @wordpress/components but follows the Semantic UI design principles.