---
id: Wizard
section: components
source: react-demos
---

import { Fragment, useRef, useState } from 'react';

import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

## Demos

### In modal

```js file="../examples/Wizard/InModal.tsx" isFullscreen
```

### In modal, with drawer

```js file="../examples/Wizard/InModalWithDrawer.tsx" isFullscreen
```

### In modal, with drawer and informational step

```js file="../examples/Wizard/InModalWithDrawerInformationalStep.tsx" isFullscreen
```

### In page

```js file="../examples/Wizard/InPage.tsx" isFullscreen
```

### In page, with drawer

```js file="../examples/Wizard/InPageWithDrawer.tsx" isFullscreen
```

### In page, with drawer and informational step

```js file="../examples/Wizard/InPageWithDrawerInformationalStep.tsx" isFullscreen
```