# Basic Usage

> Get started with Driver.js: import the library, configure your steps, and create your first multi-step product tour or element highlight in minutes.

Driver.js does three things: tours, single highlights and hints. Each starts with a few lines.

## A Tour

Pass `steps` to `driver()` and call `drive()`. Each step points at an element and describes it in a popover.

```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver({
  showProgress: true,
  steps: [
    {
      element: ".page-header",
      popover: {
        title: "Header",
        description: "Search and account live here.",
      },
    },
    {
      element: ".sidebar",
      popover: { title: "Sidebar" },
    },
    { popover: { title: "That's it" } },
  ],
});

driverObj.drive();
```

More in [Tour Basics](https://driverjs.com/docs/tour-basics.md). To make steps wait for the user, see [Interactive Tours](https://driverjs.com/docs/interactive-tours.md) and [Action-Driven Tours](https://driverjs.com/docs/action-driven-tours.md).

## A Single Highlight

`highlight()` takes one step and shows it on its own, without navigation buttons.

```js
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const driverObj = driver();

driverObj.highlight({
  element: "#some-element",
  popover: {
    title: "Title for the Popover",
    description: "Description for it",
  },
});
```

More in [Simple Highlight](https://driverjs.com/docs/simple-highlight.md).

## Hints

Hints are pulsing beacons that open a popover when clicked. There is no overlay and the page stays usable. They come from their own entry.

```js
import { hints } from "driver.js/hints";
import "driver.js/dist/hints.css";

const productHints = hints({
  hints: [
    {
      element: "#export-btn",
      popover: {
        title: "Export your data",
        description: "Download this report as CSV or PDF.",
      },
    },
    {
      element: "#summary",
      popover: {
        title: "Auto-generated summary",
        description: "Written for you from the numbers.",
      },
    },
  ],
});

productHints.show();
```

More in the [Hints guide](https://driverjs.com/docs/hints.md). For onboarding task lists, see [Checklists](https://driverjs.com/docs/checklists.md).

Driver.js needs no wrapper for React, Vue or Next.js. See [React and Vue](https://driverjs.com/docs/react-and-vue.md) for the setup and cleanup.

Next: every option is in [Configuration](https://driverjs.com/docs/configuration.md), every method in the [API Reference](https://driverjs.com/docs/api.md). For ready-made solutions to common jobs, like first-run onboarding or a tour that resumes, see [All Recipes](https://driverjs.com/docs/recipes.md).