Tabs

Docusaurus has a built-in tabs component for grouping content. We have custom styles for these tabs and use them to show equivalent content. For example:

• version 4 vs version 5 code
• yarn vs npm vs pnmp instructions

Only use tabs for equivalent content. Readers can’t read the content of the tabs simultaneously, so they’re only really useful for short examples which can be understood in their entirety. Make sure that readers don’t have to spot the differences between each tab’s content by highlighting the differences using line highlighting or explaining the differences in accompanying text if necessary.

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="yarn" label="yarn">

    ```bash
    yarn add xstate
    ```

</TabItem>

<TabItem value="npm" label="npm">

    ```bash
    npm install xstate
    ```

</TabItem>

<TabItem value="pnpm" label="pnpm">

    ```bash
    pnpm install xstate
    ```

</TabItem>
</Tabs>

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="v5" label="XState v5">

    ```ts
    import { createMachine } from 'xstate';

    const machine = createMachine({
      // ...
    });
    ```

</TabItem>

<TabItem value="v4" label="XState v4">

    ```ts
    // ❌ DEPRECATED
    import { Machine } from 'xstate';

    const machine = Machine({
      // ...
    });
    ```

</TabItem>
</Tabs>