Skip to main content
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.

​
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. 
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. 
const { broadcastTour } = useBroadcastTour();

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

​
Dependencies

The tour feature is built on top of the React tour 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 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.
⌘I