`Simple and configurable app introduction slider for react`

Usage no npm install needed!

<script type="module">
  import reactIntroSlider from '';



Easy-to-use yet very configurable app introduction slider

license version

Quick Start

npm i react-intro-slider --save
Slider With Vertical Controller gif Slider with Horizontal Controller gif


Try it online

Table of contents

Props and options

Configure looks

Name Type Default Description
size string medium Size of slider. Possible values: small, medium,large,fullscreen
titleStyle string null Styling for slide title
imageStyle string null Styling for slide image
descriptionStyle string null Styling for slide description
skipButtonStyle style null Styling for skip button
nextButtonStyle style null Styling for next button
controllerActiveIconStyle style null Style of active pagination dots
controllerInactiveIconStyle style null Style of inactive pagination dots
sliderStyle style null Style of slider container
slideStyle style null Style of slide
nextLabel string NEXT Label of next button
skipLabel string SKIP Label of skip button
doneLabel string DONE Label of done button
controllerIconActive node null Custom active icon
controllerIconInactive node null Custom inactive icon

Configure behavior

Name Type Default Description
slides array No default, required An array of objects
skipButton boolean false Enable to show a skip button to the left of pagination dots
nextButton boolean true Disable to hide the next button
closeOnOverlayClick boolean true Disable to keep slider open
controllerOrientation string vertical Orientation of the control buttons. Possible values: vertical,horizontal
sliderIsOpen boolean false Enable to show slider


Method Name Description
handleDone Callback function triggered when user presses done
handleClose Callback function triggered when slider closes because of overlay click or skip button press


You can run the example Expo-app by cloning the repo:

git clone
cd react-intro-slider
npm install
npm start