# Basic Usage

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

Once installed, you can import and start using Spotlight.js. There are several different configuration options available to customize the library. You can find more details about the options in the [configuration section](https://driverjs.com/docs/configuration.md). Given below are the basic steps to get started.

Here is a simple example of how to create a tour with multiple steps:

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

const tour = spotlight({
  showProgress: true,
  sound: true,
  celebrateOnDone: true,
  steps: [
    { element: '.page-header', popover: { title: 'Title', description: 'Description' } },
    { element: '.top-nav', popover: { title: 'Title', description: 'Description' } },
    { element: '.sidebar', popover: { title: 'Title', description: 'Description' } },
    { element: '.footer', popover: { title: 'Title', description: 'Description' } },
  ]
});

tour.drive();
```

You can pass a single step configuration to the `highlight` method to spotlight a single element. Given below is a simple example:

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

const tour = spotlight();
tour.highlight({
  element: '#some-element',
  popover: {
    title: 'Title for the Popover',
    description: 'Description for it',
  },
});
```

Beyond tours and highlights, Spotlight.js also ships hints: pulsing beacons that sit quietly on the page and open a popover when clicked, with no overlay and nothing blocked:

```js
import { hints } from "spotlight.js/hints";
import "spotlight.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();
```

Learn more about beacons, dismissals, and the optional overlay in the [Hints guide](https://driverjs.com/docs/hints.md).