# A starting point to test features

## Demo

Make a quick tour with the basic features on the main demo:

import { Cards } from 'nextra/components'

<Cards num={3}>
  <Cards.Card arrow title="Demo" href="https://www.react.tours" />
</Cards>

## Sandboxes

Make a quick tour with the basic features on the main demo:

Easily editable sandboxes to play and fork, just to test stuff or to include when opening issues or PR:

[![Edit @reactour/tour Demo Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/reactour-tour-demo-template-fglzv?fontsize=14&hidenavigation=1&theme=dark)

<Cards num={3}>
  <Cards.Card
    title="Using React Router"
    href="https://codesandbox.io/s/reactour-tour-demo-using-react-router-dom-kujql"
    target="_blank"
  />
  <Cards.Card
    title="Using React Router 2"
    href="https://codesandbox.io/s/tour-demo-using-react-router-dom-with-automatic-route-switching-fhdnxb?file=/src/App.js"
    target="_blank"
  />
  <Cards.Card
    title="Using React Modal"
    href="https://codesandbox.io/s/reactour-tour-demo-using-react-modal-8v0eo"
    target="_blank"
  />
  <Cards.Card
    title="Using Semantic UI Modal"
    href="https://codesandbox.io/s/reactour-tour-demo-using-semantic-ui-modal-xmqee"
    target="_blank"
  />
  <Cards.Card
    title="Using React Bootstrap Modal"
    href="https://codesandbox.io/s/reactour-tour-demo-using-react-bootstrap-modal-qjws4"
    target="_blank"
  />
  <Cards.Card
    title="Tour with data fetching"
    href="https://codesandbox.io/s/tour-with-data-fetching-dv2q0?file=/src/index.js"
    target="_blank"
  />
</Cards>
