> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uifoundations.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tours & Walkthroughs

> Pre configured tooling for app walkthroughs and tours.

Tools like Appcues start at \$250/month to build walkthroughs of product features. UI Foundations Kit provides a custom solution for implementing walkthroughs in your own app that is professional and customizable for free. Instead of hacking together a solution in a separate GUI and tool, you can author a walkthrough that is checked into source control.  This allows better versioning and control of logic, and greater flexibility in what you can do.

<Frame>
  <img src="https://mintcdn.com/uifoundationskit/Wk6Bxr5jJVKk6EEL/images/tours.png?fit=max&auto=format&n=Wk6Bxr5jJVKk6EEL&q=85&s=0d97cc7a20cd87427cccde17c387db94" width="1024" height="826" data-path="images/tours.png" />
</Frame>

## Usage

You can author your own tours in the `/src/data/tours.tsx` file. This file exports the tours that are defined by a set of steps. Each step is made up of `content` which can be any custom React component, and a `selector`, which can be any valid CSS selector. The `selector` is used to find the element on the page that the step should be anchored to.

```tsx theme={null}
export const welcomeToUiFoundationsKit = [
  {
    selector: 'body',
    content: (
      <Stack spacing={1.5}>
        <Box
          sx={{
            fontWeight: 'bold',
          }}
        >{`Welcome to UI Foundations Kit!`}</Box>
        <Box>
          {`To get oriented with the capabilities of this template and its components, you can continue this walkthrough.`}
        </Box>
        <Box>{`You can continue by clicking the next arrow, or using your arrow keys on the keyboard. This tour can easily be added to any of your own features with a convenient API as well!`}</Box>
      </Stack>
    ),
  },
]

const TOURS_DATA = {
  welcome: {
    title: 'Welcome to Kit',
    tourSteps: welcomeToUiFoundationsKit,
  },
};
```

You can then use the `useBroadcastTour` hook to start a tour programmatically from anywhere in your app, like clicking on a button, or rendering a page for the first time.

```tsx theme={null}
const { broadcastTour } = useBroadcastTour();

return (
  <Button
    onClick={() => {
      broadcastTour("welcome");
    }}
  >
    Start Tour
  </Button>
);
```

## Dependencies

The tour feature is built on top of the [React tour](https://github.com/elrumordelaluz/reactour) library, with styles supplied by MUI components and the UI Foundations theme.

You can refer to their docs for additional customization options and features.

## Live Preview

You can click the "Take a Tour" button on the [Live Preview](https://demo.uifoundations.com/dashboard/home) to see a tour in action. The tour or walkthrough will step you through a series of informational steps to highlight different sections of the app.