---
# Sidenav top-level section
# should be the same for all markdown files
section: extensions
subsection: component-groups
# Sidenav secondary level section
# should be the same for all markdown files
id: Deck
# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
source: react-demos
sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/DeckDemos.md
---
import { FunctionComponent, useState } from 'react';

import Deck from '@patternfly/react-component-groups/dist/dynamic/Deck';
import { ModalDeck } from '@patternfly/react-component-groups/dist/dynamic/ModalDeck';

## Demos

### Onboarding modal deck

A complete onboarding experience using ModalDeck to guide users through key product features. This demo demonstrates a multi-step walkthrough with custom styling, labels, and content.

```ts file="./OnboardingModalDeckDemo.tsx"

```