@wordpress/components

import { Button } from '@wordpress/components';

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

wp_enqueue_style( 'wp-components' );

import '@wordpress/components/build-style/style.css';

import { Button } from '@wordpress/components';

<Button
	variant="primary"
	onClick={ handleClick }
	isBusy={ isLoading }
>
	Save Changes
</Button>

import { Panel, PanelBody, PanelRow } from '@wordpress/components';

<Panel>
	<PanelBody title="Settings" initialOpen={ true }>
		<PanelRow>
			{ /* Panel content */ }
		</PanelRow>
	</PanelBody>
</Panel>

import { TextControl } from '@wordpress/components';

<TextControl
	label="Name"
	value={ name }
	onChange={ ( value ) => setName( value ) }
	help="Enter your name"
/>

import { TextareaControl } from '@wordpress/components';

<TextareaControl
	label="Description"
	value={ description }
	onChange={ ( value ) => setDescription( value ) }
	rows={ 4 }
/>

import { SelectControl } from '@wordpress/components';

<SelectControl
	label="Size"
	value={ size }
	options={ [
		{ label: 'Small', value: 'small' },
		{ label: 'Medium', value: 'medium' },
		{ label: 'Large', value: 'large' },
	] }
	onChange={ ( value ) => setSize( value ) }
/>

import { CheckboxControl } from '@wordpress/components';

<CheckboxControl
	label="Enable feature"
	checked={ isEnabled }
	onChange={ ( checked ) => setEnabled( checked ) }
/>

import { ToggleControl } from '@wordpress/components';

<ToggleControl
	label="Dark Mode"
	checked={ isDarkMode }
	onChange={ ( checked ) => setDarkMode( checked ) }
/>

import { RadioControl } from '@wordpress/components';

<RadioControl
	label="Alignment"
	selected={ alignment }
	options={ [
		{ label: 'Left', value: 'left' },
		{ label: 'Center', value: 'center' },
		{ label: 'Right', value: 'right' },
	] }
	onChange={ ( value ) => setAlignment( value ) }
/>

import { RangeControl } from '@wordpress/components';

<RangeControl
	label="Opacity"
	value={ opacity }
	onChange={ ( value ) => setOpacity( value ) }
	min={ 0 }
	max={ 100 }
/>

import { Card, CardHeader, CardBody } from '@wordpress/components';

<Card>
	<CardHeader>Card Title</CardHeader>
	<CardBody>
		Card content goes here
	</CardBody>
</Card>

import { Modal, Button } from '@wordpress/components';
import { useState } from '@wordpress/element';

function MyComponent() {
	const [ isOpen, setIsOpen ] = useState( false );

	return (
		<>
			<Button onClick={ () => setIsOpen( true ) }>
				Open Modal
			</Button>
			{ isOpen && (
				<Modal
					title="Modal Title"
					onRequestClose={ () => setIsOpen( false ) }
				>
					<p>Modal content</p>
				</Modal>
			) }
		</>
	);
}

import { Popover, Button } from '@wordpress/components';
import { useState } from '@wordpress/element';

function MyComponent() {
	const [ isVisible, setIsVisible ] = useState( false );

	return (
		<>
			<Button onClick={ () => setIsVisible( ! isVisible ) }>
				Toggle Popover
			</Button>
			{ isVisible && (
				<Popover onClose={ () => setIsVisible( false ) }>
					<div>Popover content</div>
				</Popover>
			) }
		</>
	);
}

import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';

<Dropdown
	renderToggle={ ( { isOpen, onToggle } ) => (
		<Button onClick={ onToggle } aria-expanded={ isOpen }>
			Menu
		</Button>
	) }
	renderContent={ () => (
		<MenuGroup>
			<MenuItem onClick={ handleAction1 }>Action 1</MenuItem>
			<MenuItem onClick={ handleAction2 }>Action 2</MenuItem>
		</MenuGroup>
	) }
/>

import { TabPanel } from '@wordpress/components';

<TabPanel
	tabs={ [
		{ name: 'tab1', title: 'Tab 1' },
		{ name: 'tab2', title: 'Tab 2' },
	] }
>
	{ ( tab ) => <p>Content for { tab.name }</p> }
</TabPanel>

import { NavigableMenu, MenuItem } from '@wordpress/components';

<NavigableMenu>
	<MenuItem onClick={ handleItem1 }>Item 1</MenuItem>
	<MenuItem onClick={ handleItem2 }>Item 2</MenuItem>
</NavigableMenu>

import { ColorPicker } from '@wordpress/components';

<ColorPicker
	color={ color }
	onChangeComplete={ ( value ) => setColor( value.hex ) }
/>

import { DateTimePicker } from '@wordpress/components';

<DateTimePicker
	currentDate={ date }
	onChange={ ( newDate ) => setDate( newDate ) }
/>

import { TreeSelect } from '@wordpress/components';

<TreeSelect
	label="Category"
	tree={ categoryTree }
	selectedId={ selectedCategory }
	onChange={ ( id ) => setSelectedCategory( id ) }
/>

import { Notice } from '@wordpress/components';

<Notice status="success" onRemove={ handleDismiss }>
	Changes saved successfully!
</Notice>

import { Snackbar } from '@wordpress/components';

<Snackbar onDismiss={ handleDismiss }>
	Action completed
</Snackbar>

import { Spinner } from '@wordpress/components';

<Spinner />

import { Placeholder, Button } from '@wordpress/components';

<Placeholder
	icon="admin-post"
	label="No content"
	instructions="Get started by adding content"
>
	<Button variant="primary">Add Content</Button>
</Placeholder>

import { Icon } from '@wordpress/components';
import { wordpress } from '@wordpress/icons';

<Icon icon={ wordpress } size={ 24 } />

import { Popover, SlotFillProvider } from '@wordpress/components';

function App() {
	return (
		<SlotFillProvider>
			<MyComponentWithPopover />
			<Popover.Slot />
		</SlotFillProvider>
	);
}

import type { ComponentProps } from 'react';
import { Button } from '@wordpress/components';

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