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

​
Installation

npm install @wordpress/components --save

​
Basic Usage

Import components from the root directory: 
import { Button } from '@wordpress/components';

export default function MyButton() {
  return <Button variant="primary">Click Me!</Button>;
}
This package is currently in transition. Components are being migrated to @wordpress/ui, but you should continue using @wordpress/components until further notice. Check each component’s Storybook documentation for the most accurate status information.

​
Styling

Most components include CSS styles that must be loaded:

​
Within WordPress

Add the wp-components stylesheet as a dependency: 
wp_enqueue_style(
  'my-plugin-style',
  plugins_url('style.css', __FILE__),
  array('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 all components. 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>;
}

​
Component Categories

​
UI Controls

Form inputs and interactive controls for user input:
  • Button, ButtonGroup
  • TextControl, TextareaControl
  • ToggleControl, CheckboxControl, RadioControl
  • SelectControl, ComboboxControl
  • RangeControl, NumberControl
  • ColorPicker, DateTimePicker
View all UI Controls →

​
Layout Components

Containers and layout primitives for organizing content:
  • Flex, HStack, VStack
  • Grid, Spacer
  • Panel, PanelBody, PanelRow
  • Card, CardHeader, CardBody, CardFooter
View all Layout Components →

​
Data Display

Components for presenting information:
  • Spinner
  • ProgressBar
  • Badge
  • Avatar, AvatarGroup
  • Icon, Dashicon
View all Data Display Components →

​
Feedback Components

Overlays and notifications for user feedback:
  • Notice, SnackbarList
  • Modal, ConfirmDialog
  • Popover, Tooltip
  • DropdownMenu
View all Feedback Components →

​
Storybook Documentation

Detailed examples and interactive demos are available in Storybook: https://wordpress.github.io/gutenberg/
Component status in Storybook files is the most accurate signal, above any experimental tag or component prefix.

​
Special Features

​
Popovers

By default, Popover components render in an extra element appended to the document body. For precise control, use Popover.Slot: 
import { Popover, SlotFillProvider } from '@wordpress/components';
import { MyComponentWithPopover } from './my-component';

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

​
Form Validation

For forms that edit dataset items, consider using DataForm from @wordpress/dataviews. For validation, use the Validated Form Components.

​
Component Status

Due to the ongoing transition to @wordpress/ui, some components may be deprecated or removed. Always:
  1. Check the component’s Storybook documentation for current status
  2. Look for componentStatus metadata in story files
  3. The Storybook status is more reliable than experimental prefixes

​
Resources

Build docs developers (and LLMs) love

Get started for freeTalk to us