Layout Components

import { Flex, FlexItem, FlexBlock } from '@wordpress/components';

function MyFlex() {
  return (
    <Flex>
      <FlexItem>Item 1</FlexItem>
      <FlexBlock>Flexible Item</FlexBlock>
      <FlexItem>Item 3</FlexItem>
    </Flex>
  );
}

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

function MyHStack() {
  return (
    <HStack spacing={3}>
      <Button>Cancel</Button>
      <Button variant="primary">Save</Button>
    </HStack>
  );
}

import { VStack, TextControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

function MyForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <VStack spacing={4}>
      <TextControl
        label="Name"
        value={name}
        onChange={setName}
      />
      <TextControl
        label="Email"
        type="email"
        value={email}
        onChange={setEmail}
      />
    </VStack>
  );
}

import { __experimentalGrid as Grid } from '@wordpress/components';

function MyGrid() {
  return (
    <Grid columns={3} gap={4}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
      <div>Item 5</div>
      <div>Item 6</div>
    </Grid>
  );
}

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

function MyComponent() {
  return (
    <div>
      <h2>Title</h2>
      <Spacer />
      <p>Content with automatic spacing</p>
    </div>
  );
}

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

function MyContent() {
  return (
    <div>
      <section>Section 1</section>
      <Divider />
      <section>Section 2</section>
    </div>
  );
}

import {
  Card,
  CardHeader,
  CardBody,
  CardFooter,
  __experimentalText as Text,
  __experimentalHeading as Heading,
} from '@wordpress/components';

function MyCard() {
  return (
    <Card>
      <CardHeader>
        <Heading level={4}>Card Title</Heading>
      </CardHeader>
      <CardBody>
        <Text>Card content goes here.</Text>
      </CardBody>
      <CardFooter>
        <Text>Footer information</Text>
      </CardFooter>
    </Card>
  );
}

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

function MyPanel() {
  return (
    <Panel header="Settings">
      <PanelBody title="General" icon={more} initialOpen={true}>
        <PanelRow>General settings content</PanelRow>
      </PanelBody>
      <PanelBody title="Advanced" initialOpen={false}>
        <PanelRow>Advanced settings content</PanelRow>
      </PanelBody>
    </Panel>
  );
}

import { __experimentalSurface as Surface } from '@wordpress/components';

function MySurface() {
  return (
    <Surface
      elevation={2}
      borderRadius="large"
    >
      <p>Content on elevated surface</p>
    </Surface>
  );
}

import { __experimentalElevation as Elevation } from '@wordpress/components';

function MyElevation() {
  return (
    <div style={{ position: 'relative' }}>
      <Elevation value={3} />
      <p>Content with elevation</p>
    </div>
  );
}

import { __experimentalView as View } from '@wordpress/components';

function MyView() {
  return (
    <View
      as="section"
      className="my-section"
    >
      <p>Content</p>
    </View>
  );
}

import { __experimentalBox as Box } from '@wordpress/components';

function MyBox() {
  return (
    <Box
      padding={4}
      margin={2}
      backgroundColor="#f0f0f0"
    >
      <p>Boxed content</p>
    </Box>
  );
}

import { __experimentalZStack as ZStack } from '@wordpress/components';

function MyZStack() {
  return (
    <ZStack offset={20} isLayered>
      <div style={{ background: 'red', width: 100, height: 100 }} />
      <div style={{ background: 'blue', width: 100, height: 100 }} />
      <div style={{ background: 'green', width: 100, height: 100 }} />
    </ZStack>
  );
}

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

function MyComponent() {
  return (
    <button>
      <VisuallyHidden>Close menu</VisuallyHidden>
      <span aria-hidden="true">×</span>
    </button>
  );
}